rewrite VideoScrollImage.vue to be more vue-like, return visibility: hidden

https://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5

app/src/components/VideoScrollImage.vue

@@ -1,5 +1,5 @@
 <template>
-  <img ref="img" :src="currentSrc" class="video-scroll-image"/>
+  <img ref="img" :class="['video-scroll-image', {visible, displayed, loaded}]" :src="currentSrc"/>
 </template>
 
 <script lang="ts">
@@ -17,21 +17,27 @@ export default defineComponent({
       required: true
     }
   },
+  data() {
+    return {
+      currentSrc: undefined as undefined | string,
+      displayed: false,
+      loaded: false,
+    };
+  },
   watch: {
     visible() {
-      if (!this.img || !this.visible) {
+      if (!this.img) {
         return;
       }
+      if (this.visible && !this.loaded) {
         console.debug(`[VIDEOSCROLLIMAGE] Intersected, loading ${this.definition.fullres}`);
         this.currentSrc = this.definition.fullres;
-      const grayTimeout = setTimeout(() => {
-        this.img!.classList.add("visible");
-        this.img!.style.background = "grey";
+        setTimeout(() => {
+          this.displayed = true;
         }, 3000);
         this.img.onload = () => {
-        clearTimeout(grayTimeout);
-        this.img!.classList.add("visible");
-        this.img!.style.background = "none";
+          this.displayed = true;
+          this.loaded = true;
           // if (this.isHorizontal) {
           //   this.img!.style.height = "auto";
           // } else {
@@ -39,6 +45,7 @@ export default defineComponent({
           // }
         };
       }
+    }
   },
   setup(props) {
     const img = ref<HTMLImageElement | null>(null);
@@ -62,11 +69,21 @@ export interface VideoScrollImageDef {
 .video-scroll-image {
   position: absolute;
   image-rendering: optimizeSpeed;
+  visibility: hidden;
   opacity: 0;
   transition: opacity .5s;
 }
 
 .video-scroll-image.visible {
+  visibility: visible !important;
+}
+
+.video-scroll-image.loaded {
+  background: transparent !important;
+}
+
+.video-scroll-image.displayed {
+  background: gray;
   opacity: 1 !important;
 }
 </style>