Avivash/add loading UI (#94)

oddsdk · Nov 19, 2022 · f867747 · f867747
1 parent 1210509
commit f867747
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 9 deletions.
diff --git a/src/components/common/FullScreenLoadingSpinner.svelte b/src/components/common/FullScreenLoadingSpinner.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import LoadingSpinner from '$components/common/LoadingSpinner.svelte'
+</script>
+
+<div class="w-full h-[calc(100vh-72px)] flex items-center justify-center">
+  <LoadingSpinner />
+</div>
diff --git a/src/components/common/LoadingSpinner.svelte b/src/components/common/LoadingSpinner.svelte
@@ -0,0 +1,3 @@
+<div
+  class="loader animate-spin ease-linear rounded-full border-4 border-t-4 border-t-orange-300 border-neutral h-16 w-16"
+/>
diff --git a/src/lib/init.ts b/src/lib/init.ts
@@ -1,5 +1,6 @@
 import * as webnative from 'webnative'
 
+import { dev } from '$app/environment'
 import { filesystemStore, sessionStore } from '../stores'
 import { getBackupStatus, type BackupStatus } from '$lib/auth/backup'
 
@@ -9,7 +10,7 @@ export const initialize = async (): Promise<void> => {
 
     const program: webnative.Program = await webnative.program({
       tag: { creator: 'Fission', name: 'WAT' },
-      debug: false // TODO: Add a flag or script to turn debugging on/off
+      debug: dev
     })
 
     if (program.session) {

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
   import '../global.css'
+  import { page } from '$app/stores'
   import { addNotification } from '$lib/notifications'
   import { appDescription, appImageURL, appName, appURL } from '$lib/app-info'
   import { sessionStore, themeStore } from '../stores'
   import { errorToMessage } from '$lib/session'
   import { initialize } from '$lib/init'
   import Footer from '$components/Footer.svelte'
+  import FullScreenLoadingSpinner from '$components/common/FullScreenLoadingSpinner.svelte'
   import Header from '$components/Header.svelte'
   import Notifications from '$components/notifications/Notifications.svelte'
   import SidebarNav from '$components/nav/SidebarNav.svelte'
@@ -54,11 +56,16 @@
 
 <div data-theme={$themeStore} class="min-h-screen">
   <Notifications />
-  <SidebarNav>
-    <Header />
-    <div class="px-4">
-      <slot />
-    </div>
-  </SidebarNav>
+
+  {#if $sessionStore.loading}
+    <FullScreenLoadingSpinner />
+  {:else}
+    <SidebarNav>
+      <Header />
+      <div class="px-4">
+        <slot />
+      </div>
+    </SidebarNav>
+  {/if}
   <Footer />
 </div>
diff --git a/src/routes/link-device/+page.svelte b/src/routes/link-device/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { account } from 'webnative'
+  import type * as webnative from 'webnative'
   import { goto } from '$app/navigation'
   import { page } from '$app/stores'
 
@@ -14,7 +14,7 @@
 
   let view: LinkDeviceView = 'link-device'
 
-  let accountLinkingConsumer: account.AccountLinkingConsumer
+  let accountLinkingConsumer: webnative.AccountLinkingConsumer
   let displayPin: string = ''
 
   const username = extractSearchParam($page.url, 'username')