[O] Hide loading

AquaNet/src/components/Tooltip.svelte

@@ -2,6 +2,7 @@
   import { onMount, onDestroy } from 'svelte'
 
   export let triggeredBy: string
+  export let loading: boolean = false
   let isHovered = false
   let x: number, y: number
   let targets: Element[] = []
@@ -49,7 +50,7 @@
 </script>
 
 {#if isHovered}
-  <div style="top: {y}px; left: {x}px" class="tooltip">
+  <div style="top: {y}px; left: {x}px" class="tooltip" class:loading>
     <slot />
   </div>
 {/if}
@@ -68,4 +69,8 @@
     white-space: nowrap
     color: #242424
     transform: translate(-50%, 0)
+    transition: opacity 0.2s
+
+    &.loading
+      opacity: 0
 </style>

AquaNet/src/components/UserCard.svelte

@@ -8,15 +8,16 @@
 
   export let username: string
   export let game: GameName
+  export let setLoading: (loading: boolean) => void = () => {}
 
   let data: GenericGameSummary
   let error = ""
-  let loading = true
 
-  GAME.userSummary(username, game).then(d => data = d).catch(e => error = e).finally(_ => loading = false)
+  setLoading(true)
+  GAME.userSummary(username, game).then(d => data = d).catch(e => error = e).finally(_ => setLoading(false))
 </script>
 
-{#if loading}
+{#if !data}
   <div>Loading...</div>
 {:else if error}
   <div>Error: {error}</div>

AquaNet/src/pages/Ranking.svelte

@@ -23,6 +23,7 @@
     .catch((e) => error = e.message);
 
   let hoveringUser = "";
+  let hoverLoading = false;
 </script>
 
 <main class="content leaderboard">
@@ -63,8 +64,8 @@
       {/each}
     </div>
 
-    <Tooltip triggeredBy=".name">
+    <Tooltip triggeredBy=".name" loading={hoverLoading}>
-      <UserCard username={hoveringUser} {game} />
+      <UserCard username={hoveringUser} {game} setLoading={l => hoverLoading = l} />
     </Tooltip>
   {/if}