[O] Split status overlays

AquaNet/src/components/StatusOverlays.svelte

@@ -4,8 +4,9 @@
   import { fade } from 'svelte/transition'
   import type { ConfirmProps } from "../libs/generalTypes";
   import { DISCORD_INVITE } from "../libs/config";
-  import Icon from "@iconify/svelte";
   import { t } from "../libs/i18n"
+  import Loading from './ui/Loading.svelte';
+  import Error from './ui/Error.svelte';
 
   // Props
   export let confirm: ConfirmProps | null = null
@@ -36,26 +37,11 @@
 {/if}
 
 {#if error}
-  <div class="overlay" transition:fade>
-    <div>
-      <h2 class="error">{t('status.error')}</h2>
-      <span>{t('status.error.hint')}<a href={DISCORD_INVITE}>{t('status.error.hint.link')}</a></span>
-      <span>{t('status.detail', { detail: error })}</span>
-
-      <div class="actions">
-        <button on:click={() => location.reload()} class="error">
-          {t('action.refresh')}
-        </button>
-      </div>
-    </div>
-  </div>
+  <Error {error}/>
 {/if}
 
 {#if loading && !error}
-  <div class="overlay loading" transition:fade>
-    <Icon class="icon" icon="svg-spinners:pulse-2"/>
-    <span><span>LOADING</span></span>
-  </div>
+  <Loading/>
 {/if}
 
 <style lang="sass">
@@ -65,23 +51,4 @@
 
     button
       width: 100%
-
-  .loading.overlay
-    font-size: 28rem
-
-    :global(.icon)
-      opacity: 0.5
-
-    > span
-      position: absolute
-      inset: 0
-      display: flex
-      justify-content: center
-      align-items: center
-      background: transparent
-
-      letter-spacing: 20px
-      margin-left: 20px
-
-      font-size: 1.5rem
 </style>

AquaNet/src/components/ui/Error.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { fade } from "svelte/transition";
+  import { t } from "../../libs/i18n";
+  import { DISCORD_INVITE } from "../../libs/config";
+
+  export let error: string;
+</script>
+
+<div class="overlay" transition:fade>
+  <div>
+    <h2 class="error">{t('status.error')}</h2>
+    <span>{t('status.error.hint')}<a href={DISCORD_INVITE}>{t('status.error.hint.link')}</a></span>
+    <span>{t('status.detail', { detail: error })}</span>
+
+    <div class="actions">
+      <button on:click={() => location.reload()} class="error">
+        {t('action.refresh')}
+      </button>
+    </div>
+  </div>
+</div>
+
+<style lang="sass">
+  .actions
+    display: flex
+    gap: 16px
+
+    button
+      width: 100%
+</style>

AquaNet/src/components/ui/Loading.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import { fade } from 'svelte/transition'
+</script>
+
+<div class="overlay loading" transition:fade>
+  <Icon class="icon" icon="svg-spinners:pulse-2"/>
+  <span><span>LOADING</span></span>
+</div>
+
+<style lang="sass">
+.loading.overlay
+  font-size: 28rem
+
+  :global(.icon)
+    opacity: 0.5
+
+  > span
+    position: absolute
+    inset: 0
+    display: flex
+    justify-content: center
+    align-items: center
+    background: transparent
+
+    letter-spacing: 20px
+    margin-left: 20px
+
+    font-size: 1.5rem
+</style>