Re-introduced loading screen for entire app. Changed loading flag to …

…use sidebar arrows instead
microbit-foundation · Jul 3, 2023 · 7369b68 · 7369b68
1 parent fee452e
commit 7369b68
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 9 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -56,11 +56,11 @@
     <!-- Denies mobile users access to the platform -->
     <IncompatiblePlatformView />
   {:else}
-    <!-- {#if $state.isLoading}
+    {#if $state.isLoading}
       <main class="h-screen w-screen bg-primary flex absolute z-10" transition:fade>
         <LoadingSpinner />
       </main>
-    {/if} -->
+    {/if}
     <!-- Here we use the hidden class, to allow for it to load in. -->
     <!-- <main class="h-screen w-screen m-0 relative flex" class:hidden={$state.isLoading}> -->
     <main class="h-screen w-screen m-0 relative flex">

diff --git a/src/pages/Homepage.svelte b/src/pages/Homepage.svelte
@@ -17,19 +17,12 @@
   import SelectLanguageControlBarDropdown from '../components/control-bar/control-bar-items/SelectLanguageControlBarDropdown.svelte';
   import { t } from '../i18n';
   import { state } from '../script/stores/uiStore';
-  import { fade } from 'svelte/transition';
-  import LoadingSpinner from '../components/LoadingSpinner.svelte';
 
   // Just add the content titles you wish to put on front page, in the order you wish them to be there
   const contentTiles = [DoItYourselfMachineLearningTile, IntroVideoTile];
 </script>
 
 <main class="h-full flex flex-col">
-  {#if $state.isLoading}
-    <div class="h-full w-full bg-primary flex absolute z-10" transition:fade>
-      <LoadingSpinner />
-    </div>
-  {/if}
   <div class:hidden={$state.isLoading}>
     <div>
       <ControlBar>

diff --git a/src/views/SideBarMenuView.svelte b/src/views/SideBarMenuView.svelte
@@ -5,6 +5,7 @@
   import { get } from 'svelte/store';
   import Environment from '../script/Environment.js';
   import { Paths, currentPath, navigate } from '../router/paths';
+  import { state } from '../script/stores/uiStore';
 
   $: shouldBeExpanded = (menuProps: MenuProperties) => {
     let path = $currentPath;
@@ -16,6 +17,10 @@
     }
     return menuProps.additionalExpandPaths.includes(path);
   };
+
+  const onLoad = () => {
+    $state.isLoading = false;
+  };
 </script>
 
 <div
@@ -60,6 +65,7 @@
         {#if id !== get(Menus.getMenuStore()).length - 1}
           <div class="text-center ml-auto mr-auto mb-1 mt-1">
             <img
+              on:load={onLoad}
               class="m-auto"
               src="/imgs/down_arrow.svg"
               alt="down arrow icon"