I’m using useIntersectionObserver from VueUse to apply a fade-in transition on elements when they come into view. However, on initial page load, the elements briefly appear before the intersection observer triggers, causing a flash and applying the fade-in effect with a delay.

I want the elements to fade in smoothly as soon as the page loads, without this initial flash.
Here’s the reproduction:
https://stackblitz.com/edit/nuxt-starter-vd6hka?file=app%2Fpages%2Findex.vue

Observer component:

<template>
  <div>
    <div ref="observerRef">
      <div :class="{ 'fade-in': isVisible }">
        <img crossOrigin="anonymous" src="https://unsplash.it/600/400" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { useIntersectionObserver } from '@vueuse/core';

const observerRef = ref(null);
const isVisible = ref(false);

const { stop } = useIntersectionObserver(
  observerRef,
  ([{ isIntersecting }]) => {
    isVisible.value = isIntersecting;
    if (isIntersecting) stop();
  }
);
</script>

Looking for a possible solution.