diff --git a/src/lib/components/git.svelte b/src/lib/components/git.svelte index e0320d0..f6217e8 100644 --- a/src/lib/components/git.svelte +++ b/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; } @@ -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(); }} >
{:else} - + {/if} - +