Visual indication that a page is loading

packages/web/components/top_bar.tsx

@@ -1,4 +1,9 @@
-import { faRunning, faHome, faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
+import {
+  faRunning,
+  faHome,
+  faSun,
+  faMoon,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useEffect, useState } from "react";
 import { Notification } from "../types";
@@ -13,6 +18,7 @@ function prettyName(s: string | undefined): string {
 export function TopBar({
   pageName,
   unsavedChanges,
+  isLoading,
   notifications,
   onClick,
   onThemeClick,
@@ -23,6 +29,7 @@ export function TopBar({
 }: {
   pageName?: string;
   unsavedChanges: boolean;
+  isLoading: boolean;
   notifications: Notification[];
   onClick: () => void;
   onThemeClick: () => void;
@@ -31,8 +38,7 @@ export function TopBar({
   lhs?: React.ReactNode;
   rhs?: React.ReactNode;
 }) {
-
-  const [theme, setTheme] = useState<string>(localStorage.theme ?? 'light');
+  const [theme, setTheme] = useState<string>(localStorage.theme ?? "light");
 
   return (
     <div id="sb-top" onClick={onClick}>
@@ -41,7 +47,11 @@ export function TopBar({
         <div className="inner">
           <span
             className={`sb-current-page ${
-              unsavedChanges ? "sb-unsaved" : "sb-saved"
+              isLoading
+                ? "sb-loading"
+                : unsavedChanges
+                ? "sb-unsaved"
+                : "sb-saved"
             }`}
           >
             {prettyName(pageName)}
@@ -80,12 +90,12 @@ export function TopBar({
             <button
               onClick={(e) => {
                 onThemeClick();
-                setTheme(localStorage.theme ?? 'light');
+                setTheme(localStorage.theme ?? "light");
                 e.stopPropagation();
               }}
               title="Toggle theme"
             >
-              <FontAwesomeIcon icon={theme === 'dark' ? faSun : faMoon} />
+              <FontAwesomeIcon icon={theme === "dark" ? faSun : faMoon} />
             </button>
           </div>
         </div>

packages/web/editor.tsx

@@ -610,6 +610,11 @@ export class Editor {
       return;
     }
 
+    this.viewDispatch({
+      type: "page-loading",
+      name: pageName,
+    });
+
     // Persist current page state and nicely close page
     if (this.currentPage) {
       this.saveState();
@@ -768,6 +773,7 @@ export class Editor {
           pageName={viewState.currentPage}
           notifications={viewState.notifications}
           unsavedChanges={viewState.unsavedChanges}
+          isLoading={viewState.isLoading}
           onClick={() => {
             dispatch({ type: "start-navigate" });
           }}

packages/web/reducer.ts

@@ -9,9 +9,16 @@ export default function reducer(
 ): AppViewState {
   // console.log("Got action", action);
   switch (action.type) {
+    case "page-loading":
+      return {
+        ...state,
+        isLoading: true,
+        currentPage: action.name,
+      };
     case "page-loaded":
       return {
         ...state,
+        isLoading: false,
         allPages: new Set(
           [...state.allPages].map((pageMeta) =>
             pageMeta.name === action.meta.name

packages/web/styles/theme.scss

@@ -40,6 +40,10 @@
   color: #5e5e5e;
 }
 
+.sb-loading {
+  color: #7a7a7a;
+}
+
 .sb-actions button {
   border: 1px solid #7897d0;
   border-radius: 3px;

packages/web/types.ts

@@ -12,6 +12,7 @@ export type AppViewState = {
   currentPage?: string;
   perm: "ro" | "rw";
 
+  isLoading: boolean;
   showPageNavigator: boolean;
   showCommandPalette: boolean;
   unsavedChanges: boolean;
@@ -39,6 +40,7 @@ export type AppViewState = {
 
 export const initialViewState: AppViewState = {
   perm: "rw",
+  isLoading: false,
   showPageNavigator: false,
   showCommandPalette: false,
   unsavedChanges: false,
@@ -62,6 +64,7 @@ export const initialViewState: AppViewState = {
 
 export type Action =
   | { type: "page-loaded"; meta: PageMeta }
+  | { type: "page-loading"; name: string }
   | { type: "pages-listed"; pages: Set<PageMeta> }
   | { type: "page-changed" }
   | { type: "page-saved" }