Improve navigation when logging in and out, remove need to hard reload the page and replace with smooth transitions

packages/client/src/components/ClientApp.svelte

@@ -3,7 +3,7 @@
   import { setContext, onMount } from "svelte"
   import Component from "./Component.svelte"
   import SDK from "../sdk"
-  import { createDataStore, routeStore, screenStore } from "../store"
+  import { createDataStore, initialise, screenStore } from "../store"
 
   // Provide contexts
   setContext("sdk", SDK)
@@ -14,13 +14,11 @@
 
   // Load app config
   onMount(async () => {
-    await routeStore.actions.fetchRoutes()
+    await initialise()
-    await screenStore.actions.fetchScreens()
     loaded = true
   })
 </script>
 
 {#if loaded && $screenStore.activeLayout}
-  <!-- // TODO: need to get the active screen as well -->
   <Component definition={$screenStore.activeLayout.props} />
 {/if}

packages/client/src/components/Router.svelte

@@ -7,7 +7,15 @@
   const { styleable } = getContext("sdk")
   const component = getContext("component")
 
-  $: routerConfig = getRouterConfig($routeStore.routes)
+  // Only wrap this as an array to take advantage of svelte keying,
+  // to ensure the svelte-spa-router is fully remounted when route config
+  // changes
+  $: configs = [
+    {
+      routes: getRouterConfig($routeStore.routes),
+      id: $routeStore.routeSessionId,
+    },
+  ]
 
   const getRouterConfig = routes => {
     let config = {}
@@ -25,11 +33,11 @@
   }
 </script>
 
-{#if routerConfig}
+{#each configs as config (config.id)}
   <div use:styleable={$component.styles}>
-    <Router on:routeLoading={onRouteLoading} routes={routerConfig} />
+    <Router on:routeLoading={onRouteLoading} routes={config.routes} />
   </div>
-{/if}
+{/each}
 
 <style>
   div {

packages/client/src/store/auth.js

@@ -1,18 +1,29 @@
 import * as API from "../api"
 import { getAppId } from "../utils/getAppId"
 import { writable } from "svelte/store"
+import { initialise } from "./initialise"
+import { routeStore } from "./routes"
 
 const createAuthStore = () => {
   const store = writable("")
 
+  const goToDefaultRoute = () => {
+    // Setting the active route forces an update of the active screen ID,
+    // even if we're on the same URL
+    routeStore.actions.setActiveRoute("/")
+
+    // Navigating updates the URL to reflect this route
+    routeStore.actions.navigate("/")
+  }
   const logIn = async ({ email, password }) => {
     const user = await API.logIn({ email, password })
     if (!user.error) {
       store.set(user.token)
-      location.reload()
+      await initialise()
+      goToDefaultRoute()
     }
   }
-  const logOut = () => {
+  const logOut = async () => {
     store.set("")
     const appId = getAppId()
     if (appId) {
@@ -20,7 +31,8 @@ const createAuthStore = () => {
         window.document.cookie = `budibase:${appId}:${environment}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`
       }
     }
-    location.reload()
+    await initialise()
+    goToDefaultRoute()
   }
 
   return {

packages/client/src/store/index.js

@@ -1,3 +1,6 @@
+import { routeStore } from "./routes"
+import { screenStore } from "./screens"
+
 export { authStore } from "./auth"
 export { routeStore } from "./routes"
 export { screenStore } from "./screens"
@@ -6,3 +9,6 @@ export { bindingStore } from "./binding"
 
 // Data stores are layered and duplicated, so it is not a singleton
 export { createDataStore, dataStore } from "./data"
+
+// Initialises an app by loading screens and routes
+export { initialise } from "./initialise"

packages/client/src/store/initialise.js

@@ -0,0 +1,7 @@
+import { routeStore } from "./routes"
+import { screenStore } from "./screens"
+
+export async function initialise() {
+  await routeStore.actions.fetchRoutes()
+  await screenStore.actions.fetchScreens()
+}

packages/client/src/store/routes.js

@@ -7,6 +7,7 @@ const createRouteStore = () => {
     routes: [],
     routeParams: {},
     activeRoute: null,
+    routeSessionId: Math.random(),
   }
   const store = writable(initialState)
 
@@ -29,6 +30,7 @@ const createRouteStore = () => {
 
     store.update(state => {
       state.routes = routes
+      state.routeSessionId = Math.random()
       return state
     })
   }

packages/standard-components/src/Navigation.svelte

@@ -6,8 +6,8 @@
 
   export let logoUrl
 
-  const logOut = () => {
+  const logOut = async () => {
-    authStore.actions.logOut()
+    await authStore.actions.logOut()
   }
 </script>