frontend: improve rendering perf. prefetch drafts and publications

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() {

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>

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"

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 && (

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>

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}) {

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

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 />
   }