2 Commits

Author SHA1 Message Date
Jules Neny
e43ec60ecf merge(v13-p0): iframe AEP skeleton timeout fallback fix loading stuck 2026-05-11 19:53:54 +02:00
Jules Neny
1033099663 fix(v13-p0): iframe AEP skeleton timeout fallback (resolves loading stuck)
Le @load event ne fire pas (ou tardivement) sur l'iframe AEP enfermee
dans un wrapper avec transform scale(0.42) + viewport simulee 1440px.
Resultat : skeleton 'Chargement de la carte AEP...' reste affiche
indefiniment, masquant l'iframe meme si elle se charge.

Fix :
- setTimeout 2.5s dans onMounted qui force revealIframe() inconditionnellement
- onIframeLoad clear le timer si l'event fire dans les temps (cas nominal)
- retrait du z-10 sur le skeleton (defense en profondeur : si bug residuel,
  l'iframe sera quand meme visible derriere)
- factorisation revealIframe() partagee entre @load et fallback
- cleanup du timer dans onUnmounted

Build SSR : 5 pages, 0 warning, ~4s.
Tests browser manuels a faire par Jules pour confirmer disparition skeleton.
2026-05-11 19:52:57 +02:00

View File

@@ -23,24 +23,43 @@ const iframeStyle = computed(() => ({
transformOrigin: '0 0', transformOrigin: '0 0',
})) }))
let fallbackTimer: ReturnType<typeof setTimeout> | null = null
const revealIframe = () => {
if (iframeRef.value) {
iframeRef.value.classList.remove('opacity-0')
iframeRef.value.classList.add('opacity-100')
}
skeletonHidden.value = true
}
onMounted(() => { onMounted(() => {
if (wrapperRef.value && typeof ResizeObserver !== 'undefined') { if (wrapperRef.value && typeof ResizeObserver !== 'undefined') {
updateScale() updateScale()
resizeObs = new ResizeObserver(updateScale) resizeObs = new ResizeObserver(updateScale)
resizeObs.observe(wrapperRef.value) resizeObs.observe(wrapperRef.value)
} }
// Fallback : si @load ne fire pas dans 2.5s (transform/scale peut bloquer l'event),
// on revele quand meme l'iframe pour ne pas laisser le skeleton infini.
fallbackTimer = setTimeout(() => {
revealIframe()
}, 2500)
}) })
onUnmounted(() => { onUnmounted(() => {
resizeObs?.disconnect() resizeObs?.disconnect()
resizeObs = null resizeObs = null
if (fallbackTimer) {
clearTimeout(fallbackTimer)
fallbackTimer = null
}
}) })
const onIframeLoad = () => { const onIframeLoad = () => {
if (iframeRef.value) { if (fallbackTimer) {
iframeRef.value.classList.remove('opacity-0') clearTimeout(fallbackTimer)
iframeRef.value.classList.add('opacity-100') fallbackTimer = null
} }
skeletonHidden.value = true revealIframe()
} }
</script> </script>
@@ -51,7 +70,7 @@ const onIframeLoad = () => {
<div <div
v-if="!skeletonHidden" v-if="!skeletonHidden"
id="embed-skeleton" id="embed-skeleton"
class="absolute inset-0 flex items-center justify-center bg-neutral-50 animate-pulse z-10" class="absolute inset-0 flex items-center justify-center bg-neutral-50 animate-pulse"
> >
<span class="text-neutral-400 text-sm">Chargement de la carte AEP...</span> <span class="text-neutral-400 text-sm">Chargement de la carte AEP...</span>
</div> </div>