diff --git a/src/components/vue/EmbedDynamique.vue b/src/components/vue/EmbedDynamique.vue index bf53d6e..1be71fc 100644 --- a/src/components/vue/EmbedDynamique.vue +++ b/src/components/vue/EmbedDynamique.vue @@ -23,24 +23,43 @@ const iframeStyle = computed(() => ({ transformOrigin: '0 0', })) +let fallbackTimer: ReturnType | null = null + +const revealIframe = () => { + if (iframeRef.value) { + iframeRef.value.classList.remove('opacity-0') + iframeRef.value.classList.add('opacity-100') + } + skeletonHidden.value = true +} + onMounted(() => { if (wrapperRef.value && typeof ResizeObserver !== 'undefined') { updateScale() resizeObs = new ResizeObserver(updateScale) 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(() => { resizeObs?.disconnect() resizeObs = null + if (fallbackTimer) { + clearTimeout(fallbackTimer) + fallbackTimer = null + } }) const onIframeLoad = () => { - if (iframeRef.value) { - iframeRef.value.classList.remove('opacity-0') - iframeRef.value.classList.add('opacity-100') + if (fallbackTimer) { + clearTimeout(fallbackTimer) + fallbackTimer = null } - skeletonHidden.value = true + revealIframe() } @@ -51,7 +70,7 @@ const onIframeLoad = () => {
Chargement de la carte AEP...