From 19774deb976ea4b96083cef4ff9b90c88a46592e Mon Sep 17 00:00:00 2001
From: Horacio Herrera <hi@horacioh.com>
Date: Sat, 2 Sep 2023 03:26:13 +0200
Subject: [PATCH] frontend: improve rendering perf. prefetch drafts and
 publications

---
 frontend/apps/desktop/src/root.tsx            |  70 +++++-----
 frontend/packages/app/src/app-context.tsx     |   7 +-
 .../packages/app/src/components/list-item.tsx |  20 ++-
 .../src/components/publication-list-item.tsx  |   8 +-
 .../app/src/components/quick-switcher.tsx     |   6 +-
 frontend/packages/app/src/editor/editor.tsx   |   6 +-
 frontend/packages/app/src/models/documents.ts |  52 ++++----
 .../packages/app/src/node-status-context.tsx  |   2 -
 .../app/src/pages/draft-list-page.tsx         |  80 +++++++++---
 frontend/packages/app/src/pages/draft.tsx     |  90 +++++++++----
 frontend/packages/app/src/pages/main.tsx      |  15 ++-
 .../packages/app/src/pages/onboarding.tsx     |  18 ++-
 .../app/src/pages/publication-list-page.tsx   | 121 +++++++++++-------
 .../packages/app/src/pages/publication.tsx    | 104 ++++-----------
 frontend/packages/app/src/pages/settings.tsx  |   4 +-
 frontend/packages/app/src/pages/site-page.tsx |  19 +--
 .../packages/app/src/utils/navigation.tsx     |  46 +++----
 17 files changed, 359 insertions(+), 309 deletions(-)

diff --git a/frontend/apps/desktop/src/root.tsx b/frontend/apps/desktop/src/root.tsx
index 1a1b91a974..dbf0924cc2 100644
--- a/frontend/apps/desktop/src/root.tsx
+++ b/frontend/apps/desktop/src/root.tsx
@@ -1,7 +1,9 @@
+import {ErrorBoundary} from 'react-error-boundary'
+import {Suspense} from 'react'
 import {Interceptor, createGrpcWebTransport} from '@bufbuild/connect-web'
 import {AppContextProvider, StyleProvider} from '@mintter/app/app-context'
 import {AppIPC} from '@mintter/app/app-ipc'
-import {AppErrorPage} from '@mintter/app/components/app-error'
+import {AppError, AppErrorPage} from '@mintter/app/components/app-error'
 import {BACKEND_HTTP_URL} from '@mintter/app/constants'
 import {DaemonStatusProvider} from '@mintter/app/node-status-context'
 import Main from '@mintter/app/pages/main'
@@ -143,6 +145,7 @@ function MainApp({
   queryClient: AppQueryClient
   ipc: AppIPC
 }) {
+  console.log('== RENDERING MAINAPP')
   const daemonState = useGoDaemonState()
   const grpcClient = useMemo(() => createGRPCClient(transport), [])
   const windowUtils = useWindowUtils(ipc)
@@ -155,51 +158,44 @@ function MainApp({
       lastAction: null,
     }
   }, [initRoute])
-  if (!daemonState) return null
-  if (daemonState?.t === 'error') {
+
+  if (daemonState?.t == 'ready') {
     return (
-      <StyleProvider>
-        <AppErrorPage message={daemonState?.message} />
-      </StyleProvider>
+      <AppContextProvider
+        grpcClient={grpcClient}
+        platform={appInfo.platform()}
+        queryClient={queryClient}
+        ipc={ipc}
+        externalOpen={async (url: string) => {
+          toast.error('Not implemented open: ' + url)
+        }}
+        saveCidAsFile={async (cid: string, name: string) => {
+          ipc.send?.('save-file', {cid, name})
+        }}
+        windowUtils={windowUtils}
+      >
+        <NavigationProvider initialNav={initialNav}>
+          <DaemonStatusProvider>
+            <Main />
+          </DaemonStatusProvider>
+        </NavigationProvider>
+        <Toaster
+          position="bottom-right"
+          toastOptions={{className: 'toaster'}}
+        />
+      </AppContextProvider>
     )
   }
-  if (daemonState?.t !== 'ready') {
+
+  if (daemonState?.t === 'error') {
     return (
       <StyleProvider>
-        <XStack
-          flex={1}
-          minWidth={'100vw'}
-          justifyContent="center"
-          alignItems="center"
-        >
-          <Spinner />
-        </XStack>
+        <AppErrorPage message={daemonState?.message} />
       </StyleProvider>
     )
   }
 
-  return (
-    <AppContextProvider
-      grpcClient={grpcClient}
-      platform={appInfo.platform()}
-      queryClient={queryClient}
-      ipc={ipc}
-      externalOpen={async (url: string) => {
-        toast.error('Not implemented open: ' + url)
-      }}
-      saveCidAsFile={async (cid: string, name: string) => {
-        ipc.send?.('save-file', {cid, name})
-      }}
-      windowUtils={windowUtils}
-    >
-      <NavigationProvider initialNav={initialNav}>
-        <DaemonStatusProvider>
-          <Main />
-        </DaemonStatusProvider>
-      </NavigationProvider>
-      <Toaster position="bottom-right" toastOptions={{className: 'toaster'}} />
-    </AppContextProvider>
-  )
+  return null
 }
 
 function ElectronApp() {
diff --git a/frontend/packages/app/src/app-context.tsx b/frontend/packages/app/src/app-context.tsx
index fe20422f3b..22ef260011 100644
--- a/frontend/packages/app/src/app-context.tsx
+++ b/frontend/packages/app/src/app-context.tsx
@@ -48,6 +48,7 @@ export function AppContextProvider({
   windowUtils: WindowUtils
   saveCidAsFile: (cid: string, name: string) => Promise<void>
 }) {
+  console.log('== RENDERING APP CONTEXT PROVIDER')
   if (!queryClient)
     throw new Error('queryClient is required for AppContextProvider')
   return (
@@ -63,11 +64,7 @@ export function AppContextProvider({
       }}
     >
       <QueryClientProvider client={queryClient.client}>
-        <Suspense>
-          <ErrorBoundary FallbackComponent={AppError}>
-            <StyleProvider>{children}</StyleProvider>
-          </ErrorBoundary>
-        </Suspense>
+        <StyleProvider>{children}</StyleProvider>
         <ReactQueryDevtools />
       </QueryClientProvider>
     </AppContext.Provider>
diff --git a/frontend/packages/app/src/components/list-item.tsx b/frontend/packages/app/src/components/list-item.tsx
index 93f0aed191..caee0c6e92 100644
--- a/frontend/packages/app/src/components/list-item.tsx
+++ b/frontend/packages/app/src/components/list-item.tsx
@@ -1,5 +1,5 @@
-import {FC, ReactElement, useState} from 'react'
-import {usePopoverState} from '../use-popover-state'
+import {Timestamp} from '@bufbuild/protobuf'
+import {formattedDate} from '@mintter/shared'
 import {
   Button,
   ButtonText,
@@ -8,10 +8,10 @@ import {
   Separator,
   YGroup,
 } from '@mintter/ui'
-import {GestureResponderEvent, GestureResponderHandlers} from 'react-native'
+import {FC, ReactElement} from 'react'
+import {GestureResponderEvent} from 'react-native'
+import {usePopoverState} from '../use-popover-state'
 import {MenuItem} from './dropdown'
-import {formattedDate} from '@mintter/shared'
-import {Timestamp} from '@bufbuild/protobuf'
 
 export type MenuItem = {
   key: string
@@ -24,24 +24,22 @@ export function ListItem({
   accessory,
   title,
   onPress,
-  onPrefetch,
+  onPointerEnter,
   menuItems = [],
 }: {
   accessory: ReactElement
   title: string
   onPress: (e: GestureResponderEvent) => void
-  onPrefetch?: () => void
+  onPointerEnter?: () => void
   menuItems?: MenuItem[]
 }) {
   // const [isHovering, setIsHovering] = useState(false)
   const popoverState = usePopoverState()
+
   return (
     <>
       <Button
-        onPointerEnter={() => {
-          // setIsHovering(true)
-          onPrefetch?.()
-        }}
+        onPointerEnter={onPointerEnter}
         // onPointerLeave={() => setIsHovering(false)}
         chromeless
         tag="li"
diff --git a/frontend/packages/app/src/components/publication-list-item.tsx b/frontend/packages/app/src/components/publication-list-item.tsx
index b3abab4bdc..0e4ebc9b1e 100644
--- a/frontend/packages/app/src/components/publication-list-item.tsx
+++ b/frontend/packages/app/src/components/publication-list-item.tsx
@@ -1,4 +1,3 @@
-import {prefetchPublication} from '@mintter/app/src/models/documents'
 import {copyTextToClipboard} from '@mintter/app/src/copy-to-clipboard'
 import {useNavigate, useNavRoute} from '@mintter/app/src/utils/navigation'
 import {Document, Publication} from '@mintter/shared'
@@ -22,6 +21,7 @@ export function PublicationListItem({
   copy = copyTextToClipboard,
   pubContext,
   menuItems,
+  onPointerEnter,
   label,
 }: {
   publication: Publication
@@ -30,6 +30,7 @@ export function PublicationListItem({
   pubContext: PublicationRouteContext
   menuItems?: MenuItem[]
   label?: string
+  onPointerEnter?: () => void
 }) {
   const spawn = useNavigate('spawn')
   const title = getDocumentTitle(publication.document)
@@ -56,10 +57,7 @@ export function PublicationListItem({
     <ListItem
       onPress={goToItem}
       title={title}
-      onPrefetch={() => {
-        if (publication.document)
-          prefetchPublication(publication.document.id, publication.version)
-      }}
+      onPointerEnter={onPointerEnter}
       accessory={
         <>
           {hasDraft && (
diff --git a/frontend/packages/app/src/components/quick-switcher.tsx b/frontend/packages/app/src/components/quick-switcher.tsx
index d4a5a55f0f..63741fd493 100644
--- a/frontend/packages/app/src/components/quick-switcher.tsx
+++ b/frontend/packages/app/src/components/quick-switcher.tsx
@@ -5,7 +5,7 @@ import {
 import {fetchWebLink} from '@mintter/app/src/models/web-links'
 import {useNavigate} from '@mintter/app/src/utils/navigation'
 import {getIdsfromUrl, isHyperdocsScheme} from '@mintter/shared'
-import {Spinner} from '@mintter/ui'
+import {Spinner, YStack} from '@mintter/ui'
 import {useListen} from '@mintter/app/src/app-context'
 import {Command} from 'cmdk'
 import {useState} from 'react'
@@ -47,7 +47,9 @@ export default function QuickSwitcher() {
         disabled={!!actionPromise}
       />
       {actionPromise ? (
-        <Spinner />
+        <YStack padding="$6">
+          <Spinner />
+        </YStack>
       ) : (
         <Command.List>
           <Command.Empty>No results found.</Command.Empty>
diff --git a/frontend/packages/app/src/editor/editor.tsx b/frontend/packages/app/src/editor/editor.tsx
index a62453542e..81f18d75ee 100644
--- a/frontend/packages/app/src/editor/editor.tsx
+++ b/frontend/packages/app/src/editor/editor.tsx
@@ -1,7 +1,7 @@
 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 { 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 HyperMediaEditorView({editor}: {editor: HyperDocsEditor}) {
diff --git a/frontend/packages/app/src/models/documents.ts b/frontend/packages/app/src/models/documents.ts
index 3e6e8fc188..4506ea0037 100644
--- a/frontend/packages/app/src/models/documents.ts
+++ b/frontend/packages/app/src/models/documents.ts
@@ -1,3 +1,9 @@
+import {Timestamp} from '@bufbuild/protobuf'
+import {
+  useAppContext,
+  useListen,
+  useQueryInvalidator,
+} from '@mintter/app/src/app-context'
 import {
   Block,
   BlockIdentifier,
@@ -12,46 +18,39 @@ import {
 import {editorBlockToServerBlock} from '@mintter/app/src/client/editor-to-server'
 import {HDBlockSchema, hdBlockSchema} from '@mintter/app/src/client/schema'
 import {serverChildrenToEditorChildren} from '@mintter/app/src/client/server-to-editor'
-import {createHyperdocsDocLinkPlugin} from '@mintter/app/src/editor/hyperdocs-link-plugin'
-import {useListen} from '@mintter/app/src/app-context'
 import {RightsideWidget} from '@mintter/app/src/components/rightside-block-widget'
-import {toast} from '@mintter/app/src/toast'
-import {useAppContext, useQueryInvalidator} from '@mintter/app/src/app-context'
 import {insertFile} from '@mintter/app/src/editor/file'
+import {createHyperdocsDocLinkPlugin} from '@mintter/app/src/editor/hyperdocs-link-plugin'
 import {insertImage} from '@mintter/app/src/editor/image'
 import {insertVideo} from '@mintter/app/src/editor/video'
-import {hostnameStripProtocol} from '@mintter/app/src/utils/site-hostname'
-import {Timestamp} from '@bufbuild/protobuf'
+import {useOpenUrl} from '@mintter/app/src/open-url'
+import {toast} from '@mintter/app/src/toast'
 import {
   Document,
   DocumentChange,
   GRPCClient,
+  ListPublicationsResponse,
+  Publication,
   isHyperdocsScheme,
   isMintterGatewayLink,
-  ListPublicationsResponse,
   normalizeHyperdocsLink,
-  Publication,
-  WebPublicationRecord,
 } from '@mintter/shared'
 import {useWidgetViewFactory} from '@prosemirror-adapter/react'
 import {
   FetchQueryOptions,
-  useMutation,
   UseMutationOptions,
+  UseQueryOptions,
+  useMutation,
   useQueries,
   useQuery,
-  useQueryClient,
-  UseQueryOptions,
 } from '@tanstack/react-query'
 import {Editor, Extension, findParentNode} from '@tiptap/core'
 import {Node} from 'prosemirror-model'
-import {useEffect, useRef, useState} from 'react'
-import {formattingToolbarFactory} from '../editor/formatting-toolbar'
-import {queryKeys} from './query-keys'
-import {extractReferencedDocs} from './sites'
-import {useOpenUrl} from '@mintter/app/src/open-url'
+import {useEffect, useRef} from 'react'
 import {useGRPCClient} from '../app-context'
+import {formattingToolbarFactory} from '../editor/formatting-toolbar'
 import {useNavRoute} from '../utils/navigation'
+import {queryKeys} from './query-keys'
 
 export type HDBlock = Block<typeof hdBlockSchema>
 export type HDPartialBlock = PartialBlock<typeof hdBlockSchema>
@@ -160,7 +159,7 @@ export function useDraft({
   documentId?: string
 }) {
   const grpcClient = useGRPCClient()
-  return useQuery(getDraftQuery(grpcClient, documentId, options))
+  return useQuery(queryDraft(grpcClient, documentId, options))
 }
 
 function queryLatestPublication(
@@ -181,7 +180,7 @@ function queryLatestPublication(
       }),
   }
 }
-function queryPublication(
+export function queryPublication(
   grpcClient: GRPCClient,
   documentId?: string,
   versionId?: string,
@@ -225,10 +224,11 @@ export function useLatestPublication({
   })
 }
 
-export function prefetchPublication(documentId: string, versionId?: string) {
-  // todo, bring this back
-  // appQueryClient.prefetchQuery(queryPublication(documentId, versionId))
-}
+export function prefetchPublication(
+  grpcClient: GRPCClient,
+  documentId: string,
+  versionId?: string,
+) {}
 
 export function useDocumentVersions(
   documentId: string | undefined,
@@ -398,10 +398,10 @@ type DraftChangeAction = MoveBlockAction | ChangeBlockAction | DeleteBlockAction
 // }
 
 var defaultOnError = (err: any) => {
-  console.log('== getDraftQuery ERROR', err)
+  console.log('== queryDraft ERROR', err)
 }
 
-function getDraftQuery(
+export function queryDraft(
   grpcClient: GRPCClient,
   documentId: string | undefined,
   opts?: UseQueryOptions<EditorDraftState | null>,
@@ -787,7 +787,7 @@ export function useDraftEditor(
   )
 
   const draft = useQuery(
-    getDraftQuery(grpcClient, documentId, {
+    queryDraft(grpcClient, documentId, {
       enabled: !!editor,
       onSuccess: (draft: EditorDraftState | null) => {
         readyThings.current[1] = draft
diff --git a/frontend/packages/app/src/node-status-context.tsx b/frontend/packages/app/src/node-status-context.tsx
index 9282a5a229..ec8bf440ca 100644
--- a/frontend/packages/app/src/node-status-context.tsx
+++ b/frontend/packages/app/src/node-status-context.tsx
@@ -61,8 +61,6 @@ export function DaemonStatusProvider({children}: {children: ReactNode}) {
     [peerInfoQuery.data, netStatus],
   )
 
-  // return <Onboarding />
-
   if (infoQuery.data === null) {
     return <Onboarding />
   }
diff --git a/frontend/packages/app/src/pages/draft-list-page.tsx b/frontend/packages/app/src/pages/draft-list-page.tsx
index b72cb085e7..b674b99fc5 100644
--- a/frontend/packages/app/src/pages/draft-list-page.tsx
+++ b/frontend/packages/app/src/pages/draft-list-page.tsx
@@ -15,6 +15,7 @@ import {
   MainWrapper,
   MoreHorizontal,
   Separator,
+  Spinner,
   Text,
   XStack,
   YStack,
@@ -23,35 +24,68 @@ import {X} from '@tamagui/lucide-icons'
 import {useClickNavigate} from '../utils/navigation'
 import {GestureResponderEvent} from 'react-native'
 import {ListItem} from '../components/list-item'
+import {useAppContext} from '../app-context'
+import {queryDraft} from '../models/documents'
 
 export default function DraftList() {
-  let {data, isInitialLoading} = useDraftList()
+  let drafts = useDraftList()
   // TODO: add a `isFetching` indicator
   const openDraft = useOpenDraft()
-  return (
-    <>
+
+  if (drafts.data) {
+    return (
+      <>
+        <MainWrapper>
+          <Container>
+            {drafts.isInitialLoading ? (
+              <YStack padding="$6">
+                <Spinner />
+              </YStack>
+            ) : drafts.data.documents.length ? (
+              <YStack paddingVertical="$6">
+                {drafts.data.documents.map((draft) => (
+                  <DraftListItem key={draft.id} draft={draft} />
+                ))}
+              </YStack>
+            ) : (
+              <EmptyList
+                description="You have no Drafts yet."
+                action={() => {
+                  openDraft(false)
+                }}
+              />
+            )}
+          </Container>
+        </MainWrapper>
+        <Footer />
+      </>
+    )
+  }
+
+  if (drafts.error) {
+    return (
       <MainWrapper>
         <Container>
-          {isInitialLoading ? (
-            <p>loading...</p>
-          ) : data && data.documents.length ? (
-            <YStack tag="ul" padding={0}>
-              {data.documents.map((draft) => (
-                <DraftListItem key={draft.id} draft={draft} />
-              ))}
-            </YStack>
-          ) : (
-            <EmptyList
-              description="You have no Drafts yet."
-              action={() => {
-                openDraft(false)
-              }}
-            />
-          )}
+          <YStack gap="$3" alignItems="flex-start" maxWidth={500} padding="$8">
+            <Text fontFamily="$body" fontWeight="700" fontSize="$6">
+              Drafts List Error
+            </Text>
+            <Text fontFamily="$body" fontSize="$4">
+              {JSON.stringify(drafts.error)}
+            </Text>
+            <Button theme="yellow" onPress={() => drafts.refetch()}>
+              try again
+            </Button>
+          </YStack>
         </Container>
       </MainWrapper>
-      <Footer />
-    </>
+    )
+  }
+
+  return (
+    <YStack padding="$6">
+      <Spinner />
+    </YStack>
   )
 }
 
@@ -61,6 +95,7 @@ export function DraftListItem({draft}: {draft: Document}) {
     id: draft.id,
   })
   const navigate = useClickNavigate()
+  const {queryClient, grpcClient} = useAppContext()
   const draftRoute: DraftRoute = {key: 'draft', draftId: draft.id}
   const goToItem = (e: GestureResponderEvent) => {
     navigate(draftRoute, e)
@@ -70,6 +105,9 @@ export function DraftListItem({draft}: {draft: Document}) {
     <>
       <ListItem
         title={title}
+        onPointerEnter={() => {
+          queryClient.client.prefetchQuery(queryDraft(grpcClient, draft.id))
+        }}
         onPress={goToItem}
         accessory={<></>}
         menuItems={[
diff --git a/frontend/packages/app/src/pages/draft.tsx b/frontend/packages/app/src/pages/draft.tsx
index 1b5e614d87..9fe0361e2c 100644
--- a/frontend/packages/app/src/pages/draft.tsx
+++ b/frontend/packages/app/src/pages/draft.tsx
@@ -9,9 +9,18 @@ import {useDaemonReady} from '@mintter/app/src/node-status-context'
 import {useNavRoute} from '@mintter/app/src/utils/navigation'
 import {DebugData} from '@mintter/app/src/components/debug-data'
 import Footer from '@mintter/app/src/components/footer'
-import {Button, Container, MainWrapper, Text, YStack} from '@mintter/ui'
+import {
+  Button,
+  Container,
+  MainWrapper,
+  SizableText,
+  Text,
+  Theme,
+  YStack,
+} from '@mintter/ui'
 import {useState} from 'react'
 import {ErrorBoundary, FallbackProps} from 'react-error-boundary'
+import {DocumentPlaceholder} from './document-placeholder'
 
 export default function DraftPage() {
   let route = useNavRoute()
@@ -21,27 +30,45 @@ export default function DraftPage() {
   const [debugValue, setDebugValue] = useState(false)
   const documentId = route.draftId // TODO, clean this up when draftId != docId
 
-  const {editor} = useDraftEditor(documentId, {
+  const {editor, query} = useDraftEditor(documentId, {
     onEditorState: setDebugValue,
   })
 
   let isDaemonReady = useDaemonReady()
 
-  return (
-    <ErrorBoundary
-      FallbackComponent={DraftError}
-      onReset={() => window.location.reload()}
-    >
+  if (editor && query.data) {
+    return (
+      <ErrorBoundary
+        FallbackComponent={DraftError}
+        onReset={() => window.location.reload()}
+      >
+        <MainWrapper>
+          {!isDaemonReady ? <NotSavingBanner /> : null}
+          <HDEditorContainer>
+            {editor && <HyperMediaEditorView editor={editor} />}
+            {debugValue && <DebugData data={debugValue} />}
+          </HDEditorContainer>
+        </MainWrapper>
+        <Footer />
+      </ErrorBoundary>
+    )
+  }
+
+  if (editor && query.error) {
+    return (
       <MainWrapper>
-        {!isDaemonReady ? <NotSavingBanner /> : null}
-        <HDEditorContainer>
-          {editor && <HyperMediaEditorView editor={editor} />}
-          {debugValue && <DebugData data={debugValue} />}
-        </HDEditorContainer>
+        <Container>
+          <DraftError
+            documentId={documentId}
+            error={query.error}
+            resetErrorBoundary={() => query.refetch()}
+          />
+        </Container>
       </MainWrapper>
-      <Footer />
-    </ErrorBoundary>
-  )
+    )
+  }
+
+  return <DocumentPlaceholder />
 }
 
 function NotSavingBanner() {
@@ -52,14 +79,33 @@ function NotSavingBanner() {
   )
 }
 
-function DraftError({error, resetErrorBoundary}: FallbackProps) {
+function DraftError({
+  documentId,
+  error,
+  resetErrorBoundary,
+}: FallbackProps & {documentId: string}) {
   return (
-    <Container>
-      <YStack role="alert" space>
-        <Text fontWeight="800">Draft Error:</Text>
-        <Text tag="pre">{error.message}</Text>
-        <Button onPress={resetErrorBoundary}>Try again</Button>
+    <Theme name="red">
+      <YStack
+        marginVertical="$8"
+        padding="$4"
+        borderRadius="$5"
+        borderColor="$color5"
+        borderWidth={1}
+        backgroundColor="$color3"
+        gap="$3"
+        alignItems="center"
+      >
+        <SizableText size="$4" textAlign="center" color="$color9">
+          Error loading Draft (Document Id: {documentId})
+        </SizableText>
+        <SizableText color="$color8" size="$2" fontFamily="$mono">
+          {JSON.stringify(error)}
+        </SizableText>
+        <Button size="$3" onPress={() => resetErrorBoundary()}>
+          Retry
+        </Button>
       </YStack>
-    </Container>
+    </Theme>
   )
 }
diff --git a/frontend/packages/app/src/pages/main.tsx b/frontend/packages/app/src/pages/main.tsx
index 885152fe44..535b7302a1 100644
--- a/frontend/packages/app/src/pages/main.tsx
+++ b/frontend/packages/app/src/pages/main.tsx
@@ -8,7 +8,7 @@ import {
   useNavigate,
   useNavRoute,
 } from '@mintter/app/src/utils/navigation'
-import {YStack} from '@mintter/ui'
+import {Spinner, YStack} from '@mintter/ui'
 import {ProsemirrorAdapterProvider} from '@prosemirror-adapter/react'
 import {lazy, Suspense, useMemo} from 'react'
 import {ErrorBoundary} from 'react-error-boundary'
@@ -36,7 +36,11 @@ var QuickSwitcher = lazy(
 )
 
 function BaseLoading() {
-  return <span>Loading...</span>
+  return (
+    <YStack padding="$6">
+      <Spinner />
+    </YStack>
+  )
 }
 
 function getPageComponent(navRoute: NavRoute) {
@@ -106,13 +110,16 @@ function getPageComponent(navRoute: NavRoute) {
 
 export default function Main() {
   const navR = useNavRoute()
-  const isSettings = navR.key == 'settings'
+
+  console.log(`== ~ Main ~ navR:`, navR)
+  const isSettings = navR?.key == 'settings'
   const navigate = useNavigate()
   const {PageComponent, Fallback} = useMemo(
     () => getPageComponent(navR),
-    [navR.key],
+    [navR],
   )
   const routeKey = useMemo(() => getRouteKey(navR), [navR])
+
   useListen<NavRoute>(
     'open_route',
     (event) => {
diff --git a/frontend/packages/app/src/pages/onboarding.tsx b/frontend/packages/app/src/pages/onboarding.tsx
index 648f38e8f3..4c9e514f8f 100644
--- a/frontend/packages/app/src/pages/onboarding.tsx
+++ b/frontend/packages/app/src/pages/onboarding.tsx
@@ -39,6 +39,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useReducer,
   useRef,
   useState,
@@ -664,15 +665,18 @@ export function OnboardingProvider({
     console.log(`=== onboarding state:
 			${JSON.stringify(state)}
 		`)
-  }, [stepIndex, key])
+  }, [state])
+
+  let value = useMemo(
+    () => ({
+      state,
+      dispatch,
+    }),
+    [state],
+  )
 
   return (
-    <OnboardingContext.Provider
-      value={{
-        state,
-        dispatch,
-      }}
-    >
+    <OnboardingContext.Provider value={value}>
       {children}
     </OnboardingContext.Provider>
   )
diff --git a/frontend/packages/app/src/pages/publication-list-page.tsx b/frontend/packages/app/src/pages/publication-list-page.tsx
index ebe83c4c1d..60f4d07620 100644
--- a/frontend/packages/app/src/pages/publication-list-page.tsx
+++ b/frontend/packages/app/src/pages/publication-list-page.tsx
@@ -12,71 +12,94 @@ import {useState} from 'react'
 import './publication-list-page.css'
 import {DeleteDocumentDialog} from '../components/delete-dialog'
 import {useAppDialog} from '../components/dialog'
+import {queryPublication} from '../models/documents'
+import {useAppContext} from '../app-context'
+import {queryKeys} from '../models/query-keys'
 
 export function PublicationListPage({trustedOnly}: {trustedOnly: boolean}) {
-  let {data} = usePublicationList({trustedOnly})
+  let publications = usePublicationList({trustedOnly})
   let drafts = useDraftList()
+  let {queryClient, grpcClient} = useAppContext()
   let openDraft = useOpenDraft()
-  const pubs = data?.publications
-  const [scrollHeight, setScrollHeight] = useState(800)
-
-  let content = (
-    <YStack justifyContent="center" height={scrollHeight}>
-      <Spinner />
-    </YStack>
-  )
+  const pubs = publications.data?.publications
   const deleteDialog = useAppDialog(DeleteDocumentDialog, {isAlert: true})
+
   if (pubs) {
     if (pubs.length) {
-      content = (
+      return (
         <>
-          {pubs.map((publication) => {
-            const docId = publication.document?.id
-            if (!docId) return null
-            return (
-              <PublicationListItem
-                pubContext={trustedOnly ? {key: 'trusted'} : null}
-                key={publication.document?.id}
-                hasDraft={drafts.data?.documents.find(
-                  (d) => d.id == publication.document?.id,
-                )}
-                publication={publication}
-                menuItems={[
-                  {
-                    key: 'delete',
-                    label: 'Delete Publication',
-                    icon: Delete,
-                    onPress: () => {
-                      deleteDialog.open(docId)
-                    },
-                  },
-                ]}
-              />
-            )
-          })}
+          <MainWrapper>
+            <Container>
+              <YStack paddingVertical="$6">
+                {pubs.map((publication) => {
+                  const docId = publication.document?.id
+                  if (!docId) return null
+                  return (
+                    <PublicationListItem
+                      pubContext={trustedOnly ? {key: 'trusted'} : null}
+                      key={publication.document?.id}
+                      hasDraft={drafts.data?.documents.find(
+                        (d) => d.id == publication.document?.id,
+                      )}
+                      onPointerEnter={() => {
+                        if (publication.document?.id) {
+                          queryClient.client.prefetchQuery(
+                            queryPublication(
+                              grpcClient,
+                              publication.document.id,
+                              publication.version,
+                            ),
+                          )
+                        }
+                      }}
+                      publication={publication}
+                      menuItems={[
+                        {
+                          key: 'delete',
+                          label: 'Delete Publication',
+                          icon: Delete,
+                          onPress: () => {
+                            deleteDialog.open(docId)
+                          },
+                        },
+                      ]}
+                    />
+                  )
+                })}
+              </YStack>
+            </Container>
+            {deleteDialog.content}
+          </MainWrapper>
+          <Footer />
         </>
       )
     } else {
-      content = (
-        <EmptyList
-          description="You have no Publications yet."
-          action={() => {
-            openDraft(false)
-          }}
-        />
+      return (
+        <>
+          <MainWrapper>
+            <Container>
+              <EmptyList
+                description="You have no Publications yet."
+                action={() => {
+                  openDraft(false)
+                }}
+              />
+            </Container>
+          </MainWrapper>
+          <Footer />
+        </>
       )
     }
   }
+
   return (
     <>
-      <MainWrapper
-        onLayout={(e) => {
-          // console.log('layout height!', e.nativeEvent.layout.height)
-          // setScrollHeight(() => e.nativeEvent.layout.height)
-        }}
-      >
-        <Container>{content}</Container>
-        {deleteDialog.content}
+      <MainWrapper>
+        <Container>
+          <YStack padding="$6">
+            <Spinner />
+          </YStack>
+        </Container>
       </MainWrapper>
       <Footer />
     </>
diff --git a/frontend/packages/app/src/pages/publication.tsx b/frontend/packages/app/src/pages/publication.tsx
index acd20607a0..0289bb40a7 100644
--- a/frontend/packages/app/src/pages/publication.tsx
+++ b/frontend/packages/app/src/pages/publication.tsx
@@ -2,14 +2,10 @@ import {AppBanner, BannerText} from '@mintter/app/src/components/app-banner'
 import {VersionsAccessory} from '@mintter/app/src/components/changes-list'
 import {CitationsAccessory} from '@mintter/app/src/components/citations'
 import Footer, {FooterButton} from '@mintter/app/src/components/footer'
-import {Placeholder} from '@mintter/app/src/components/placeholder-box'
 import {features} from '@mintter/app/src/constants'
 import {useDocChanges} from '@mintter/app/src/models/changes'
 import {useDocCitations} from '@mintter/app/src/models/content-graph'
-import {
-  usePublication,
-  usePublicationEditor,
-} from '@mintter/app/src/models/documents'
+import {usePublicationEditor} from '@mintter/app/src/models/documents'
 import {useNavRoute, useNavigate} from '@mintter/app/src/utils/navigation'
 import {MttLink, pluralS} from '@mintter/shared'
 import {
@@ -31,9 +27,10 @@ import {CitationsProvider} from '@mintter/app/src/components/citations-context'
 import {DebugData} from '@mintter/app/src/components/debug-data'
 import {
   HDEditorContainer,
-  HyperDocsEditorView,
+  HyperMediaEditorView,
 } from '@mintter/app/src/editor/editor'
 import {useLatestPublication} from '../models/documents'
+import {DocumentPlaceholder} from './document-placeholder'
 
 export default function PublicationPage() {
   const route = useNavRoute()
@@ -50,10 +47,7 @@ export default function PublicationPage() {
     throw new Error(
       `Publication route does not contain docId: ${JSON.stringify(route)}`,
     )
-  const {editor, data, status, error, refetch} = usePublicationEditor(
-    docId,
-    versionId,
-  )
+  const publication = usePublicationEditor(docId, versionId)
 
   // this checks if there's a block in the url, so we can highlight and scroll into the selected block
   let [focusBlock] = useState(() => blockId)
@@ -62,32 +56,14 @@ export default function PublicationPage() {
 
   const {data: changes} = useDocChanges(status == 'success' ? docId : undefined)
   const {data: citations} = useDocCitations(
-    status == 'success' ? docId : undefined,
+    publication.status == 'success' ? docId : undefined,
   )
 
-  if (status == 'error') {
-    return (
-      <YStack>
-        <YStack gap="$3" alignItems="flex-start" maxWidth={500} padding="$8">
-          <Text fontFamily="$body" fontWeight="700" fontSize="$6">
-            Publication ERROR
-          </Text>
-          <Text fontFamily="$body" fontSize="$4">
-            {JSON.stringify(error)}
-          </Text>
-          <Button theme="yellow" onPress={() => refetch()}>
-            try again
-          </Button>
-        </YStack>
-      </YStack>
-    )
-  }
-
-  if (status == 'success') {
+  if (publication.data) {
     return (
       <ErrorBoundary
         FallbackComponent={AppError}
-        onReset={() => window.location.reload()}
+        onReset={() => publication.refetch()}
       >
         <CitationsProvider
           documentId={docId}
@@ -100,10 +76,10 @@ export default function PublicationPage() {
             <Allotment.Pane>
               <YStack height="100%">
                 <MainWrapper>
-                  {editor && (
+                  {publication.editor && (
                     <HDEditorContainer>
-                      <HyperDocsEditorView editor={editor} />
-                      <DebugData data={data} />
+                      <HyperMediaEditorView editor={publication.editor} />
+                      <DebugData data={publication.data} />
                     </HDEditorContainer>
                   )}
 
@@ -167,49 +143,25 @@ export default function PublicationPage() {
     )
   }
 
-  return (
-    <>
-      <PublicationShell />
-
-      {/* <p
-        className={classnames('publication-fetching-message', {
-          visible: state.matches('fetching.extended'),
-        })}
-      >
-        Searching the network...
-      </p> */}
-    </>
-  )
-}
-
-function PublicationShell() {
-  // TODO: update shell
-  return (
-    <YStack
-      marginTop="$7"
-      width="100%"
-      maxWidth="600px"
-      gap="$6"
-      marginHorizontal="auto"
-    >
-      <BlockPlaceholder />
-      <BlockPlaceholder />
-      <BlockPlaceholder />
-      <BlockPlaceholder />
-      <BlockPlaceholder />
-    </YStack>
-  )
-}
+  if (publication.error) {
+    return (
+      <YStack>
+        <YStack gap="$3" alignItems="flex-start" maxWidth={500} padding="$8">
+          <Text fontFamily="$body" fontWeight="700" fontSize="$6">
+            Publication ERROR
+          </Text>
+          <Text fontFamily="$body" fontSize="$4">
+            {JSON.stringify(publication.error)}
+          </Text>
+          <Button theme="yellow" onPress={() => publication.refetch()}>
+            try again
+          </Button>
+        </YStack>
+      </YStack>
+    )
+  }
 
-function BlockPlaceholder() {
-  return (
-    <YStack width="600px" gap="$2">
-      <Placeholder width="100%" />
-      <Placeholder width="92%" />
-      <Placeholder width="84%" />
-      <Placeholder width="90%" />
-    </YStack>
-  )
+  return <DocumentPlaceholder />
 }
 
 type ActivePanel = 'conversations' | 'citations' | 'changes' | undefined
diff --git a/frontend/packages/app/src/pages/settings.tsx b/frontend/packages/app/src/pages/settings.tsx
index 8231ab4735..f2cc25e78e 100644
--- a/frontend/packages/app/src/pages/settings.tsx
+++ b/frontend/packages/app/src/pages/settings.tsx
@@ -691,7 +691,9 @@ function SiteSettings({
       </XStack>
 
       {isLoading ? (
-        <Spinner />
+        <YStack padding="$6">
+          <Spinner />
+        </YStack>
       ) : (
         <YStack gap="$5">
           <SiteInfoSection hostname={hostname} isOwner={isOwner} />
diff --git a/frontend/packages/app/src/pages/site-page.tsx b/frontend/packages/app/src/pages/site-page.tsx
index dd1b11b5e6..f72fa154f5 100644
--- a/frontend/packages/app/src/pages/site-page.tsx
+++ b/frontend/packages/app/src/pages/site-page.tsx
@@ -1,8 +1,5 @@
 import {useAccount} from '@mintter/app/src/models/accounts'
-import {
-  prefetchPublication,
-  usePublication,
-} from '@mintter/app/src/models/documents'
+import {usePublication} from '@mintter/app/src/models/documents'
 import {useSitePublications} from '@mintter/app/src/models/sites'
 import {usePopoverState} from '@mintter/app/src/use-popover-state'
 import {getDocUrl} from '@mintter/shared'
@@ -115,18 +112,9 @@ function WebPublicationListItem({
     : null
   const {data: author} = useAccount(publication?.document?.author)
   return (
-    <Button
-      chromeless
-      theme="gray"
-      tag="li"
-      onMouseEnter={() =>
-        publication?.document
-          ? prefetchPublication(publication.document?.id, publication.version)
-          : null
-      }
-    >
+    <Button chromeless tag="li">
       {webPub.path == '' ? (
-        <ButtonText onPress={goToItem} theme="gray" fontWeight="700" flex={1}>
+        <ButtonText onPress={goToItem} fontWeight="700" flex={1}>
           {publication?.document?.title}
         </ButtonText>
       ) : webPub.path == '/' ? (
@@ -148,7 +136,6 @@ function WebPublicationListItem({
       )}
       <Button
         size="$1"
-        theme="$color5"
         onPress={goToItem}
         data-testid="list-item-author"
         className={`item-author`}
diff --git a/frontend/packages/app/src/utils/navigation.tsx b/frontend/packages/app/src/utils/navigation.tsx
index 2d625bed97..ba97ff7756 100644
--- a/frontend/packages/app/src/utils/navigation.tsx
+++ b/frontend/packages/app/src/utils/navigation.tsx
@@ -4,6 +4,7 @@ import {
   ReactNode,
   useContext,
   useEffect,
+  useMemo,
   useReducer,
 } from 'react'
 import {decodeRouteFromPath, encodeRouteToPath} from './route-encoding'
@@ -204,19 +205,19 @@ export function NavigationProvider({
   const activeRoute = routes[routeIndex]
   useEffect(() => {
     send('windowRoute', activeRoute)
-  }, [activeRoute, lastAction])
+  }, [activeRoute, lastAction, send])
 
-  useEffect(() => {
-    console.log(
-      `${routes.map((r, i) => {
-        const {key, ...rest} = r
-        return `${i === routeIndex ? '✅' : '⏺️'} ${key} :: ${simpleStringy(
-          rest,
-        )}`
-      }).join(`
-`)}`,
-    )
-  }, [routes, routeIndex])
+  //   useEffect(() => {
+  //     console.log(
+  //       `${routes.map((r, i) => {
+  //         const {key, ...rest} = r
+  //         return `${i === routeIndex ? '✅' : '⏺️'} ${key} :: ${simpleStringy(
+  //           rest,
+  //         )}`
+  //       }).join(`
+  // `)}`,
+  //     )
+  //   }, [routes, routeIndex])
 
   useEffect(() => {
     appNavDispatch = dispatch
@@ -233,16 +234,17 @@ export function NavigationProvider({
   // start editing pub, add content
   // second time resume editing, doesnt work
 
-  return (
-    <NavContext.Provider
-      value={{
-        state: navState,
-        dispatch,
-      }}
-    >
-      {children}
-    </NavContext.Provider>
+  console.log('== RENDERING NAV CONTEXT')
+
+  let value = useMemo(
+    () => ({
+      state: navState,
+      dispatch,
+    }),
+    [navState],
   )
+
+  return <NavContext.Provider value={value}>{children}</NavContext.Provider>
 }
 
 export function dispatchAppNavigation(action: NavAction) {
@@ -265,7 +267,7 @@ export function useNavRoute() {
   const nav = useContext(NavContext)
   if (!nav)
     throw new Error('useNavRoute must be used within a NavigationProvider')
-  return nav.state.routes[nav.state.routeIndex]
+  return nav.state.routes[nav.state.routeIndex] || {key: 'home'}
 }
 
 export function useNavigationState() {