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.
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user