merge(v13-p0): iframe AEP skeleton timeout fallback fix loading stuck

This commit is contained in:
Jules Neny
2026-05-11 19:53:54 +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>