dashboard client: prevent infinite "Loading" when there are no classe…

…s/challenges

dashboard/client/src/SideNavBar.svelte

@@ -44,7 +44,7 @@
   {#if visible}
     <div transition:slide={{ axis: 'x' }} class="sidebar pt-5 flex-shrink-0">
       <button type="button" class="btn-close close-btn" on:click={() => (visible = false)}></button>
-      {#if !($challenges.length && $classes.length)}
+      {#if !($challenges && $classes)}
         <div class="spinner-border" role="status">
           <span class="visually-hidden">Loading...</span>
         </div>

dashboard/client/src/routing.js

@@ -19,12 +19,12 @@ export const chosenChallenge = derived([challenges, path], ([challenges, path])
   const match = path.match(/^#challenge\/(.+)$/);
   if (!match) return null;
 
-  return challenges.find((chall) => chall.id === match[1]) ?? null;
+  return challenges?.find((chall) => chall.id === match[1]) ?? null;
 });
 
 export const chosenClass = derived([classes, path], ([classes, path]) => {
   const match = path.match(/^#class\/(.+)$/);
   if (!match) return null;
 
-  return classes.find((cls) => cls.id === match[1]) ?? null;
+  return classes?.find((cls) => cls.id === match[1]) ?? null;
 });

dashboard/client/src/stores.js

@@ -2,8 +2,8 @@ import { get, writable } from 'svelte/store';
 
 export const isLoading = writable(false);
 
-export const classes = writable([]);
-export const challenges = writable([]);
+export const classes = writable(null);
+export const challenges = writable(null);
 
 export const storageBackedWritable = (key, defaultData) => {
   const store = writable(localStorage.getItem(key) ?? defaultData);