[O] Use better error and loading

AquaNet/src/ErrorMessage.svelte

@@ -1,12 +0,0 @@
-
-
-<script>
-    export let ifError = `No Error was Passed through. Quick, check the Devtools and create a Ticket!`;
-</script>
-<blockquote>
-    <h2 style="color:red; margin-top:0px;">Something's wrong, Please Try again Later.</h2>
-    <p>Need to know why? Check Below.</p>
-    <code>
-      {ifError}
-    </code>
-  </blockquote>

AquaNet/src/LoadingMessage.svelte

@@ -1,45 +0,0 @@
-<div class="pleaseWait">
-    <div class="loadingCircleDiv"><div class="loadingCircle">
-        <div></div>
-        </div></div>
-        <style type="text/css">
-        .pleaseWait {
-            margin:auto;
-        }
-
-        @keyframes loadingCircle {
-          0% { transform: rotate(0deg) }
-          50% { transform: rotate(180deg) }
-          100% { transform: rotate(360deg) }
-        }
-        .loadingCircle div {
-          position: absolute;
-          animation: loadingCircle 1s linear infinite;
-          width: 82px;
-          height: 82px;
-          top: 9px;
-          left: 9px;
-          border-radius: 50%;
-          box-shadow: 0 4.1px 0 0 #93dbe9;
-          transform-origin: 41px 43.05px;
-        }
-        .loadingCircleDiv {
-          width: 94px;
-          height: 94px;
-          display: inline-block;
-          overflow: hidden;
-          background: none;
-        }
-        .loadingCircle {
-          width: 100%;
-          height: 100%;
-          position: relative;
-          transform: translateZ(0) scale(0.94);
-          backface-visibility: hidden;
-          transform-origin: 0 0;
-        }
-        .loadingCircle div { box-sizing: content-box; }
-        </style>
-<p>Please Wait...</p>
-</div>
-

AquaNet/src/pages/MaimaiRating.svelte

@@ -3,12 +3,11 @@
   import {getMaimaiAllMusic, getMaimai} from "../libs/maimai";
   import type {ParsedRating, Rating} from "../libs/maimaiTypes";
   import { getMult } from "../libs/scoring";
-  import ErrorMessage from "../ErrorMessage.svelte";
-    import LoadingMessage from "../LoadingMessage.svelte";
+  import StatusOverlays from "../components/StatusOverlays.svelte";
 
   export let userId: any
   userId = +userId
-  let ifError: string | null;
+  let error: string | null;
 
   if (!userId) console.error("No user ID provided")
 
@@ -28,9 +27,7 @@
       old: parseRating(data.userRating.ratingList),
       new: parseRating(data.userRating.newRatingList)
     }
-  }).catch((error) => {
-    ifError = error
-  })
+  }).catch((e) => error = e.message)
 
   function parseRating(arr: Rating[]) {
     return arr.map(x => {
@@ -96,12 +93,9 @@
         {/each}
       </div>
     {/each}
-    {:else if ifError}
-    <ErrorMessage {ifError}/>
-    {:else}
-    <LoadingMessage/>
-    {/if}
-  
+  {/if}
+
+  <StatusOverlays error={error} loading={!parsedRatings} />
 </main>
 
 <style lang="sass">

AquaNet/src/pages/Ranking.svelte

@@ -2,21 +2,18 @@
   import { clz, title } from "../libs/ui";
   import { GAME } from "../libs/sdk";
   import type { GenericRanking } from "../libs/generalTypes";
-  import ErrorMessage from "../ErrorMessage.svelte";
-  import LoadingMessage from "../LoadingMessage.svelte";
+  import StatusOverlays from "../components/StatusOverlays.svelte";
 
   title(`Ranking`);
 
   let d: { users: GenericRanking[] };
-  let ifError: string | null;
+  let error: string | null;
   Promise.all([GAME.ranking("mai2")])
     .then(([users]) => {
       console.log(users)
       d = { users };
     })
-    .catch((error) => {
-      ifError = error;
-    });
+    .catch((e) => error = e.message);
 </script>
 
 <main class="content leaderboard">
@@ -47,11 +44,9 @@
         </div>
       {/each}
     </div>
-  {:else if ifError}
-  <ErrorMessage {ifError}/>
-  {:else}
-  <LoadingMessage/>
   {/if}
+
+  <StatusOverlays error={error} loading={!d} />
 </main>
 
 <style lang="sass">

AquaNet/src/pages/UserHome.svelte

@@ -8,8 +8,7 @@
   import 'chartjs-adapter-moment';
   import { DATA, GAME } from "../libs/sdk";
   import { type GameName, getMult } from "../libs/scoring";
-  import ErrorMessage from "../ErrorMessage.svelte";
-  import LoadingMessage from "../LoadingMessage.svelte";
+  import StatusOverlays from "../components/StatusOverlays.svelte";
 
   registerChart()
 
@@ -17,7 +16,7 @@
   export let game: GameName
   game = game || "mai2"
   let calElement: HTMLElement
-  let ifError: string | null;
+  let error: string | null;
   title(`User ${username}`)
 
   interface MusicAndPlay extends MusicMeta, GenericGamePlaylog {}
@@ -40,9 +39,7 @@
     d = {user, trend, recent: user.recent.map(it => {return {...music[it.musicId], ...it}})}
     localStorage.setItem("tmp-user-details", JSON.stringify(d))
     renderCal(calElement, trend.map(it => {return {date: it.date, value: it.plays}}))
-  }).catch((error) => {
-      ifError = error;
-    });
+  }).catch((e) => error = e.message);
 
   const pfpNotFound = (e: Event) => {
     (e.target as HTMLImageElement).src = "/assets/imgs/no_profile.png"
@@ -54,7 +51,7 @@
 </script>
 
 <main id="user-home" class="content">
-  {#if d !== null}
+  {#if d}
     <div class="user-pfp">
       <img src={`${DATA_HOST}/d/${game}/assetbundle/icon/${d.user.iconId.toString().padStart(6, "0")}.png`} alt="" class="pfp" on:error={pfpNotFound}>
       <h2>{d.user.name}</h2>
@@ -195,11 +192,9 @@
         {/each}
       </div>
     </div>
-    {:else if ifError}
-    <ErrorMessage {ifError}/>
-    {:else}
-    <LoadingMessage/>
   {/if}
+
+  <StatusOverlays {error} loading={!d} />
 </main>
 
 <style lang="sass">