(frontend) nicer loading for 'shelf'

Author: enchant97

frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import { Routes, Route, Outlet, useParams, A } from '@solidjs/router';
-import { Component, For, Show, createResource, createSignal } from 'solid-js';
+import { Component, For, Show, Suspense, createResource, createSignal } from 'solid-js';
 import Header from './components/header';
 import { useApi } from './contexts/ApiProvider';
 import ProtectedRoute from './components/protected_route';
@@ -115,9 +115,7 @@ const MainApp: Component = () => {
               })
             }}
           >
-            <Show when={!booksById.loading && !notesById.loading} fallback={<LoadingBar />}>
-              <Outlet />
-            </Show>
+            <Outlet />
           </DrawerProvider>
         </div>
       </div>
@@ -141,7 +139,7 @@ const MainApp: Component = () => {
           </ul>
           <li class="menu-title"><span>NOTES</span></li>
           <ul class="overflow-auto bg-base-100 flex-1 w-full rounded-lg">
-            <Show when={!notesById.loading} fallback={<LoadingSpin />}>
+            <Show when={!notesById.loading && !booksById.loading} fallback={<LoadingSpin />}>
               <For each={sortedNotes()}>
                 {(note) => <li>
                   <A

frontend/src/components/loading.tsx

@@ -8,6 +8,10 @@ export const LoadingSpin: Component = () => {
   return <span class="loading loading-spinner m-auto block mt-2"></span>
 }
 
+export const LoadingRing: Component = () => {
+  return <span class="loading loading-ring loading-ring-lg block m-auto"></span>
+}
+
 type LoadingScreenProps = {
   message?: string
 }

frontend/src/pages/shelf.tsx

@@ -10,7 +10,7 @@ import NewNoteModal from '../components/modals/new_note';
 import UpdateBookModal from '../components/modals/edit_book';
 import UpdateNoteModal from '../components/modals/edit_note';
 import { useDrawer } from '../contexts/DrawerProvider';
-import { LoadingBar } from '../components/loading';
+import { LoadingRing } from '../components/loading';
 import { apiErrorIntoToast, useToast } from '../contexts/ToastProvider';
 import { ApiError } from '../core/api';
 import Icon from '../components/icon';
@@ -76,11 +76,13 @@ const Shelf: Component = () => {
     }
   })
 
+  const globalLoading = () => book.loading || note.loading || noteContent.loading
+
   const breadcrumb: () => Breadcrumb = () => {
     return {
       username: params.username,
-      bookSlug: book()?.name,
-      noteSlug: note()?.name,
+      bookSlug: globalLoading() ? undefined : book()?.name,
+      noteSlug: globalLoading() ? undefined : note()?.name,
     }
   }
 
@@ -155,7 +157,7 @@ const Shelf: Component = () => {
             onclick={onNewBookClick}
             class="btn join-item btn-ghost"
             type="button"
-            disabled={!allowBookCreate()}
+            disabled={globalLoading() || !allowBookCreate()}
             title="Create New Notebook"
           >
             <Icon name="folder-plus" />
@@ -164,30 +166,30 @@ const Shelf: Component = () => {
             onclick={onNewNoteClick}
             class="btn join-item btn-ghost"
             type="button"
-            disabled={!allowNoteCreate()}
+            disabled={globalLoading() || !allowNoteCreate()}
             title="Create New Note"
           >
             <Icon name="file-plus" />
           </button>
           <Switch>
-            <Match when={book() && !note()}>
+            <Match when={slugParts().bookSlug && !slugParts().noteSlug}>
               <button
                 onclick={onUpdateBookClick}
                 class="btn join-item btn-ghost"
                 type="button"
-                disabled={!allowNoteCreate()}
+                disabled={globalLoading() || !allowNoteCreate()}
                 title="Notebook Settings"
               >
                 <Icon name="settings" />
                 <Icon name="folder" />
               </button>
             </Match>
-            <Match when={book() && note()}>
+            <Match when={slugParts().bookSlug && slugParts().noteSlug}>
               <button
                 onclick={onUpdateNoteClick}
                 class="btn join-item btn-ghost"
                 type="button"
-                disabled={!allowNoteCreate()}
+                disabled={globalLoading() || !allowNoteCreate()}
                 title="Note Settings"
               >
                 <Icon name="settings" />
@@ -198,7 +200,7 @@ const Shelf: Component = () => {
         </div>
         <NoteBreadcrumb class="flex-1" {...breadcrumb()} />
       </div>
-      <Show when={!note.loading && !noteContent.loading} fallback={<LoadingBar />}>
+      <Show when={!note.loading && !noteContent.loading} fallback={<LoadingRing />}>
         <Show when={note()} fallback={
           <div class="hero pt-6 bg-base-200 rounded-md">
             <div class="hero-content text-center">