Git: Fixed counter animation resetting when viewport changed status.

src/lib/components/git.svelte

@@ -29,12 +29,12 @@
         repoSize: 0,
     };
 
-    // Loading
+    // Loading logic
     let finishLoading = new Loading();
     let finishLoadingStatus = false;
 
     // Mouse animation
-    let overlay_div;
+    let overlayDiv;
     let cursorX = 0;
     let cursorY = 0;
     let updateX = true;
@@ -44,7 +44,7 @@
             cursorX = event.clientX - rect.left;
         }
         cursorY = event.clientY - rect.top;
-        overlay_div.style.backgroundImage = `radial-gradient(circle farthest-corner at ${Math.floor(cursorX)}px ${Math.floor(cursorY)}px, var(--color-background) 0%, #958a98 100%)`;
+        overlayDiv.style.backgroundImage = `radial-gradient(circle farthest-corner at ${Math.floor(cursorX)}px ${Math.floor(cursorY)}px, var(--color-background) 0%, #958a98 100%)`;
     }
 
     function animateForeground(isEntering, div_back) {
@@ -59,12 +59,13 @@
     }
 
     // Loading animation
-    let div_loading;
-    let loadingAnimation;
+    let divLoading;
+    let skeleton;
+    let countersSet = false;
 
     onMount(async () => {
-        loadingAnimation = new LoadingSkeleton(div_loading);
-        loadingAnimation.start();
+        skeleton = new LoadingSkeleton(divLoading);
+        skeleton.start();
 
         // Gathering commit number
         let response = await getCommitCount(repo);
@@ -97,7 +98,7 @@
                         (repoColors[i].lang_percentage / lang_total) * 1000,
                     ) / 10;
             }
-            await loadingAnimation.stop();
+            await skeleton.stop();
             finishLoadingStatus = finishLoading.setStatus(true);
         }
     });
@@ -129,6 +130,7 @@
                 );
             },
         });
+        countersSet = true;
     }
 </script>
 
@@ -137,13 +139,13 @@
     role="button"
     tabindex="0"
     on:mousemove={(event) => {
-        update_gradient(event, overlay_div);
+        update_gradient(event, overlayDiv);
     }}
     on:mouseenter={() => {
-        animateForeground(true, overlay_div);
+        animateForeground(true, overlayDiv);
     }}
     on:mouseleave={() => {
-        animateForeground(false, overlay_div);
+        animateForeground(false, overlayDiv);
     }}
     on:click={() => {
         window.location.href = `https://git.etheryo.fr/${repo}`;
@@ -153,7 +155,7 @@
     }}
     use:viewport
     on:enterViewport={() => {
-        animateCounters();
+        if (!countersSet) animateCounters();
     }}
 >
     <div class="git-container overlay">
@@ -182,9 +184,9 @@
                 {/each}
             </div>
         {:else}
-            <div class="git-loading w-100 h-100" bind:this={div_loading}></div>
+            <div class="git-loading w-100 h-100" bind:this={divLoading}></div>
         {/if}
     </div>
     <div class="overlay-front"></div>
-    <div class="overlay-back" bind:this={overlay_div}></div>
+    <div class="overlay-back" bind:this={overlayDiv}></div>
 </div>