Compare commits
2 Commits
9bb55bc311
...
e43ec60ecf
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
e43ec60ecf | ||
|
|
1033099663 |
@@ -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