feat: Loading indicator as Modal

csaf-poc · Nov 28, 2023 · 31999ea · 31999ea
1 parent 3aab652
commit 31999ea
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 25 deletions.
diff --git a/src/lib/Spinner.svelte b/src/lib/Spinner.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
-  export let open = false;
+  export let active = false;
 </script>
 
-{#if open}
-  <i class="bx bx-loader-alt spinner" />
+{#if active}
+  <div class="loading-container">
+    <i class="bx bx-loader-alt spinner" />
+  </div>
 {/if}
diff --git a/src/lib/store.ts b/src/lib/store.ts
@@ -15,10 +15,9 @@ type AppStore = {
   currentFeed: any;
   ui: {
     appMode: string;
-    csafLoading: boolean;
     docToggleExpandAll: boolean;
     feedErrorMsg: string;
-    feedLoading: boolean;
+    loading: boolean;
     singleErrorMsg: string;
     isFeedDistributionOpen: boolean;
     isFeedGeneralSectionOpen: boolean;
@@ -51,10 +50,9 @@ const generateInitialState = (): AppStore => {
     currentFeed: null,
     ui: {
       appMode: MODE.SINGLE,
-      csafLoading: false,
       docToggleExpandAll: false,
       feedErrorMsg: "",
-      feedLoading: false,
+      loading: false,
       singleErrorMsg: "",
       isFeedDistributionOpen: true,
       isFeedGeneralSectionOpen: true,
@@ -82,12 +80,6 @@ function createStore() {
 
   return {
     subscribe,
-    setCSAFLoading: (option: boolean) => {
-      update((settings) => {
-        settings.ui.csafLoading = option;
-        return settings;
-      });
-    },
     toggleDocExpandAll: () => {
       update((settings) => {
         if (settings.ui.docToggleExpandAll) {
@@ -122,9 +114,9 @@ function createStore() {
         return settings;
       });
     },
-    setFeedLoading: (option: boolean) => {
+    setLoading: (option: boolean) => {
       update((settings) => {
-        settings.ui.feedLoading = option;
+        settings.ui.loading = option;
         return settings;
       });
     },

diff --git a/src/lib/urlloader.ts b/src/lib/urlloader.ts
@@ -10,27 +10,27 @@ async function loadSingleCSAF(url: string) {
   url = `${PUBLIC_PROXY_PATH}${url}`;
   appStore.setSingleErrorMsg("");
   try {
-    appStore.setCSAFLoading(true);
+    appStore.setLoading(true);
     const response = await fetch(`${url}`);
     if (response.ok) {
       const csafDoc = await response.json();
       appStore.clearUploadedFile();
       const docModel = convertToDocModel(csafDoc);
       appStore.setDocument(docModel);
-      appStore.setCSAFLoading(false);
+      appStore.setLoading(false);
     } else {
       const msg = response.statusText
         ? `An Error occured: HTTP ${response.status} - ${response.statusText}`
         : `An Error occured: HTTP ${response.status}`;
       appStore.setSingleErrorMsg(msg);
-      appStore.setCSAFLoading(false);
+      appStore.setLoading(false);
       appStore.setDocument(null);
     }
   } catch (error) {
     appStore.setSingleErrorMsg(
       "Failed to load from URL. The server may be unreachable or the resource cannot be accessed due to CORS restrictions."
     );
-    appStore.setCSAFLoading(false);
+    appStore.setLoading(false);
     appStore.setDocument(null);
   }
 }
@@ -46,7 +46,7 @@ const displayErrorMsg = (response: Response) => {
   appStore.setFeedErrorMsg(msg);
   appStore.setProviderMetadata(null);
   appStore.setCurrentFeed(null);
-  appStore.setFeedLoading(false);
+  appStore.setLoading(false);
 };
 
 /**
@@ -56,7 +56,7 @@ const displayErrorMsg = (response: Response) => {
 async function load(url: string) {
   url = `${PUBLIC_PROXY_PATH}${url}`;
   try {
-    appStore.setFeedLoading(true);
+    appStore.setLoading(true);
     const response = await fetch(`${url}`);
     if (response.ok) {
       appStore.setCurrentFeed(null);
@@ -77,7 +77,7 @@ async function load(url: string) {
         appStore.setFeedSectionOpen();
       }
 
-      appStore.setFeedLoading(false);
+      appStore.setLoading(false);
     } else {
       displayErrorMsg(response);
     }
@@ -87,7 +87,7 @@ async function load(url: string) {
     );
     appStore.setProviderMetadata(null);
     appStore.setCurrentFeed(null);
-    appStore.setFeedLoading(false);
+    appStore.setLoading(false);
   }
 }
 

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -2,6 +2,7 @@
   import "boxicons/css/boxicons.min.css";
   import { appStore } from "$lib/store";
   import { base } from "$app/paths";
+  import Spinner from "$lib/Spinner.svelte";
   /*global __APP_VERSION__*/
   const version: string = __APP_VERSION__;
   const MODE = {
@@ -97,3 +98,5 @@
   </div>
   <slot />
 </div>
+
+<Spinner active={$appStore.ui.loading} />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -46,5 +46,4 @@
 
 <div class="appbody">
   <SingleView />
-  <Spinner open={$appStore.ui.csafLoading} />
 </div>
diff --git a/src/routes/feed/+page.svelte b/src/routes/feed/+page.svelte
@@ -40,5 +40,4 @@
 
 <div class="appbody">
   <FeedView />
-  <Spinner open={$appStore.ui.feedLoading} />
 </div>
diff --git a/static/css/main.css b/static/css/main.css
@@ -71,6 +71,20 @@ hr {
   margin-bottom: 0.5rem;
 }
 
+.loading-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  background: #000;
+  color: #fff;
+  opacity: 30%;
+  width: 100vw;
+  height: 100vh;
+  justify-content: center;
+  align-items: center;
+}
+
 .content {
   margin-left: 0.5rem;
   margin-right: 0.5rem;