chore: use progress bar for page transition

apps/dashboard/src/routes/+layout.svelte

@@ -1,22 +1,20 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { MetaTags } from 'svelte-meta-tags';
-  import { fly } from 'svelte/transition';
-  import { derived } from 'svelte/store';
   import { goto } from '$app/navigation';
   import { browser, dev } from '$app/environment';
-  import { page, navigating } from '$app/stores';
+  import { page } from '$app/stores';
   import isEmpty from 'lodash/isEmpty';
   import merge from 'lodash/merge';
-  import { Theme, ToastNotification, Loading } from 'carbon-components-svelte';
+  import { Theme } from 'carbon-components-svelte';
   import type { CarbonTheme } from 'carbon-components-svelte/types/Theme/Theme.svelte';
   import LandingNavigation from '$lib/components/Navigation/index.svelte';
+  import ProgressBar from '$lib/components/ProgressBar/index.svelte';
   import OrgNavigation from '$lib/components/Navigation/app.svelte';
   import LMSNavigation from '$lib/components/Navigation/lms.svelte';
   import OrgLandingPage from '$lib/components/Org/LandingPage/index.svelte';
   import Snackbar from '$lib/components/Snackbar/index.svelte';
   import Restricted from '$lib/components/Page/Restricted.svelte';
-  import Backdrop from '$lib/components/Backdrop/index.svelte';
   import Apps from '$lib/components/Apps/index.svelte';
   import PlayQuiz from '$lib/components/Org/Quiz/Play/index.svelte';
   import { course } from '$lib/components/Course/store';
@@ -49,10 +47,6 @@
   let queryParam = $page.url?.search;
   let carbonTheme: CarbonTheme = 'white';
 
-  const delayedPreloading = derived(navigating, (currentPreloading, set) => {
-    setTimeout(() => set(currentPreloading), 250);
-  });
-
   function setupAnalytics() {
     // Set up sentry
     initSentry();
@@ -60,8 +54,8 @@
     // Set up posthog
     initPosthog();
 
-		// Disable umami on localhost
-		if (dev) {
+    // Disable umami on localhost
+    if (dev) {
       localStorage.setItem('umami.disabled', '1');
     }
   }
@@ -310,19 +304,6 @@
   <OrgLandingPage orgSiteName={data.orgSiteName} org={data.org} />
 {:else}
   <main class="dark:bg-black">
-    {#if $navigating && $delayedPreloading}
-      <Backdrop disableCenteredContent={true} className="">
-        <div class="h-full w-full relative" transition:fly={{ x: -200, duration: 500 }}>
-          <ToastNotification kind="info-square" class="absolute bottom-5 left-5">
-            <span slot="title" class="flex items-center">
-              <span class="mr-2">Redirecting</span>
-              <Loading withOverlay={false} small />
-            </span>
-            <span slot="caption">Taking you to the next page, please wait.</span>
-          </ToastNotification>
-        </div>
-      </Backdrop>
-    {/if}
     {#if !hideNavByRoute($page.url?.pathname)}
       {#if isOrgPage($page.url?.pathname) || $page.url?.pathname.includes('profile') || isCoursesPage(path)}
         <OrgNavigation bind:title={$course.title} isCoursePage={isCoursesPage(path)} />
@@ -336,6 +317,8 @@
           disableSignup={false}
         />
       {/if}
+
+      <ProgressBar textColorClass="text-gray-400" />
     {/if}
 
     <div class={path.includes('home') ? '' : 'flex justify-between'}>