frontend: add suspense components to particular layout sections

frontend/packages/app/src/components/placeholder-box.tsx

@@ -12,7 +12,7 @@ export const Placeholder = ({
     <XStack
       width={width}
       height={height}
-      backgroundColor="$color4"
+      backgroundColor="$color5"
       borderRadius="$1"
     />
   )

frontend/packages/app/src/components/titlebar/index.tsx

@@ -1,5 +1,6 @@
-import {lazy} from 'react'
-import {useAppContext} from '@mintter/app/src/app-context'
+import {AppPlatform, useAppContext} from '@mintter/app/src/app-context'
+import {TitlebarWrapper} from '@mintter/ui'
+import {Suspense, lazy, useMemo} from 'react'
 
 var TitleBarMacos = lazy(() => import('./macos'))
 var TitleBarWindows = lazy(() => import('./windows'))
@@ -12,9 +13,24 @@ export interface TitleBarProps {
 
 export function TitleBar(props: TitleBarProps) {
   const {platform} = useAppContext()
-  if (platform == 'darwin') return <TitleBarMacos isMacOS={true} {...props} />
-  if (platform == 'win32') return <TitleBarWindows {...props} />
-  if (platform == 'linux') return <TitleBarLinux {...props} />
-  console.warn(`Titlebar: unsupported platform: ${platform}`)
-  return <TitleBarMacos isMacOS={true} {...props} />
+  let Component = useMemo(() => getComponent(platform), [platform])
+  return (
+    <Suspense fallback={<TitlebarWrapper />}>
+      <Component {...props} />
+    </Suspense>
+  )
+}
+
+function getComponent(platform: AppPlatform) {
+  switch (platform) {
+    case 'win32':
+      return TitleBarWindows
+    case 'linux':
+      return TitleBarLinux
+    case 'darwin':
+      return TitleBarMacos
+    default:
+      console.warn(`Titlebar: unsupported platform: ${platform}`)
+      return TitleBarMacos
+  }
 }

frontend/packages/app/src/editor/editor.tsx

@@ -1,17 +1,13 @@
 import '@mintter/app/src/blocknote-core/style.css'
-import {BlockNoteView} from '@mintter/app/src/blocknote-react'
-import {HyperDocsEditor} from '@mintter/app/src/models/documents'
-import {Container, YStack} from '@mintter/ui'
+import { BlockNoteView } from '@mintter/app/src/blocknote-react'
+import { HyperDocsEditor } from '@mintter/app/src/models/documents'
+import { YStack } from '@mintter/ui'
 import './editor.css'
 
-export function HyperDocsEditorView({editor}: {editor: HyperDocsEditor}) {
+export function HyperMediaEditorView({editor}: {editor: HyperDocsEditor}) {
   return <BlockNoteView editor={editor} />
 }
 
 export function HDEditorContainer({children}: {children: React.ReactNode}) {
-  return (
-    <>
-      <YStack className="editor">{children}</YStack>
-    </>
-  )
+  return <YStack className="editor">{children}</YStack>
 }

frontend/packages/app/src/pages/document-placeholder.tsx

@@ -0,0 +1,32 @@
+import {YStack} from '@mintter/ui'
+import {Placeholder} from '../components/placeholder-box'
+
+export function DocumentPlaceholder() {
+  // TODO: update shell
+  return (
+    <YStack
+      marginTop="$7"
+      width="100%"
+      maxWidth="600px"
+      gap="$6"
+      marginHorizontal="auto"
+    >
+      <BlockPlaceholder />
+      <BlockPlaceholder />
+      <BlockPlaceholder />
+      <BlockPlaceholder />
+      <BlockPlaceholder />
+    </YStack>
+  )
+}
+
+function BlockPlaceholder() {
+  return (
+    <YStack width="600px" gap="$2">
+      <Placeholder width="100%" />
+      <Placeholder width="92%" />
+      <Placeholder width="84%" />
+      <Placeholder width="90%" />
+    </YStack>
+  )
+}

frontend/packages/app/src/pages/main.tsx

@@ -10,10 +10,11 @@ import {
 } from '@mintter/app/src/utils/navigation'
 import {YStack} from '@mintter/ui'
 import {ProsemirrorAdapterProvider} from '@prosemirror-adapter/react'
-import {lazy, useMemo} from 'react'
+import {lazy, Suspense, useMemo} from 'react'
 import {ErrorBoundary} from 'react-error-boundary'
 import {NotFoundPage} from './base'
 import './polyfills'
+import {DocumentPlaceholder} from './document-placeholder'
 
 var PublicationList = lazy(
   () => import('@mintter/app/src/pages/publication-list-page'),
@@ -34,40 +35,83 @@ var QuickSwitcher = lazy(
   () => import('@mintter/app/src/components/quick-switcher'),
 )
 
+function BaseLoading() {
+  return <span>Loading...</span>
+}
+
 function getPageComponent(navRoute: NavRoute) {
   switch (navRoute.key) {
     case 'home':
-      return PublicationList
+      return {
+        PageComponent: PublicationList,
+        Fallback: BaseLoading,
+      }
     case 'groups':
-      return Groups
+      return {
+        PageComponent: Groups,
+        Fallback: BaseLoading,
+      }
     case 'group':
-      return Group
+      return {
+        PageComponent: Group,
+        Fallback: BaseLoading,
+      }
     case 'drafts':
-      return DraftList
+      return {
+        PageComponent: DraftList,
+        Fallback: BaseLoading,
+      }
     case 'site':
-      return Site
+      return {
+        PageComponent: Site,
+        Fallback: BaseLoading,
+      }
     case 'contacts':
-      return Contacts
+      return {
+        PageComponent: Contacts,
+        Fallback: BaseLoading,
+      }
     case 'account':
-      return Account
+      return {
+        PageComponent: Account,
+        Fallback: BaseLoading,
+      }
     case 'publication':
-      return Publication
+      return {
+        PageComponent: Publication,
+        Fallback: DocumentPlaceholder,
+      }
     case 'draft':
-      return Draft
+      return {
+        PageComponent: Draft,
+        Fallback: DocumentPlaceholder,
+      }
     case 'settings':
-      return Settings
+      return {
+        PageComponent: Settings,
+        Fallback: BaseLoading,
+      }
     case 'global-publications':
-      return GlobalPublicationList
+      return {
+        PageComponent: GlobalPublicationList,
+        Fallback: BaseLoading,
+      }
     default:
-      return NotFoundPage
+      return {
+        PageComponent: NotFoundPage,
+        Fallback: BaseLoading,
+      }
   }
 }
 
 export default function Main() {
   const navR = useNavRoute()
   const isSettings = navR.key == 'settings'
   const navigate = useNavigate()
-  const PageComponent = useMemo(() => getPageComponent(navR), [navR.key])
+  const {PageComponent, Fallback} = useMemo(
+    () => getPageComponent(navR),
+    [navR.key],
+  )
   const routeKey = useMemo(() => getRouteKey(navR), [navR])
   useListen<NavRoute>(
     'open_route',
@@ -78,20 +122,22 @@ export default function Main() {
     [navigate],
   )
   return (
-    <YStack position="absolute" top={0} left={0} width="100%" height="100%">
+    <YStack fullscreen>
       <TitleBar clean={isSettings} />
-      <ErrorBoundary
-        FallbackComponent={AppError}
-        onReset={() => {
-          window.location.reload()
-        }}
-      >
-        <ProsemirrorAdapterProvider>
-          <PageComponent key={routeKey} />
-        </ProsemirrorAdapterProvider>
-        {!isSettings ? <QuickSwitcher /> : null}
-        {/* <ReactQueryDevtools /> */}
-      </ErrorBoundary>
+      <Suspense fallback={<Fallback />}>
+        <ErrorBoundary
+          FallbackComponent={AppError}
+          onReset={() => {
+            window.location.reload()
+          }}
+        >
+          <ProsemirrorAdapterProvider>
+            <PageComponent key={routeKey} />
+          </ProsemirrorAdapterProvider>
+          {!isSettings ? <QuickSwitcher /> : null}
+          {/* <ReactQueryDevtools /> */}
+        </ErrorBoundary>
+      </Suspense>
     </YStack>
   )
 }