Greatly improve the loading speed and UX of the annotation sidebar

WorldBrain · May 18, 2024 · a22a816 · a22a816
1 parent 9b3e9a8
commit a22a816
Show file tree

Hide file tree

Showing 5 changed files with 174 additions and 112 deletions.
diff --git a/src/in-page-ui/ribbon/react/containers/ribbon/logic.ts b/src/in-page-ui/ribbon/react/containers/ribbon/logic.ts
@@ -279,10 +279,12 @@ export class RibbonContainerLogic extends UILogic<
     hydrateStateFromDB: EventHandler<'hydrateStateFromDB'> = async ({
         event: { url },
     }) => {
+        // Stage 1: All relevant metadata
         let lists = []
         let interActionTimestamps = []
 
         this.emitMutation({
+            fullPageUrl: { $set: url },
             bookmark: {
                 isBookmarked: { $set: false },
                 lastBookmarkTimestamp: { $set: null },
@@ -313,13 +315,18 @@ export class RibbonContainerLogic extends UILogic<
         )
 
         // this section is there because sometimes when switching pages in web apps, the cache is still the old one when trying to see if the page has annotations
-
         annotationsByURL.map((annotation) => {
             return interActionTimestamps.push(
                 Math.floor(annotation.createdWhen / 1000),
             )
         })
 
+        // Set data for lists and annotations
+        this.emitMutation({
+            lists: { pageListIds: { $set: lists } },
+            annotations: { $set: annotationsByURL.length },
+        })
+
         const bookmark = await this.dependencies.bookmarks.findBookmark(url)
 
         const isBookmarked =
@@ -329,24 +336,31 @@ export class RibbonContainerLogic extends UILogic<
             interActionTimestamps.push(bookmark.time)
         }
         const saveTime = Math.min.apply(Math, interActionTimestamps)
+        this.emitMutation({
+            bookmark: {
+                isBookmarked: { $set: !!isBookmarked },
+                lastBookmarkTimestamp: { $set: saveTime },
+            },
+        })
+
+        // Enable Ribbon after everything set
+        this.emitMutation({
+            isRibbonEnabled: {
+                $set: await this.dependencies.getSidebarEnabled(),
+            },
+        })
 
         const activityStatus = await this.dependencies.syncSettings.activityIndicator.get(
             'feedHasActivity',
         )
+
+        // set general settings that are not important for first load
         this.emitMutation({
-            fullPageUrl: { $set: url },
             pausing: {
                 isPaused: {
                     $set: true,
                 },
             },
-            bookmark: {
-                isBookmarked: { $set: !!isBookmarked },
-                lastBookmarkTimestamp: { $set: saveTime },
-            },
-            isRibbonEnabled: {
-                $set: await this.dependencies.getSidebarEnabled(),
-            },
             tooltip: {
                 isTooltipEnabled: {
                     $set: await this.dependencies.tooltip.getState(),
@@ -357,8 +371,6 @@ export class RibbonContainerLogic extends UILogic<
                     $set: await this.dependencies.highlights.getState(),
                 },
             },
-            lists: { pageListIds: { $set: lists } },
-            annotations: { $set: annotationsByURL.length },
             hasFeedActivity: { $set: activityStatus },
         })
     }

diff --git a/src/sidebar/annotations-sidebar/containers/AnnotationsSidebarContainer.tsx b/src/sidebar/annotations-sidebar/containers/AnnotationsSidebarContainer.tsx
@@ -1287,7 +1287,7 @@ export class AnnotationsSidebarContainer<
                                             reply.reference.id ===
                                             replyReference.id,
                                     )?.userReference?.id ===
-                                    this.state.currentUserReference?.id,
+                                    this.state.currentUserId,
                                 comment:
                                     this.state.replyEditStates[
                                         replyReference.id

diff --git a/src/sidebar/annotations-sidebar/containers/AnnotationsSidebarInPage.tsx b/src/sidebar/annotations-sidebar/containers/AnnotationsSidebarInPage.tsx
@@ -229,8 +229,13 @@ export class AnnotationsSidebarInPage extends AnnotationsSidebarContainer<
 
     private handleExternalAction = async (event: SidebarActionOptions) => {
         // instantl load page summaries bc they are not dependent on initlogicpromise
+        await Promise.all([this.initLogicPromise])
+        await this.processEvent('setSidebarVisible', null)
 
         if (event.action === 'show_page_summary') {
+            await this.processEvent('setActiveSidebarTab', {
+                tab: 'summary',
+            })
             await this.processEvent('askAIviaInPageInteractions', {
                 textToProcess: event.highlightedText,
                 prompt: event.prompt,
@@ -270,7 +275,6 @@ export class AnnotationsSidebarInPage extends AnnotationsSidebarContainer<
                 await this.processEvent('setActiveSidebarTab', {
                     tab: 'annotations',
                 })
-                await sleepPromise(100)
             }
 
             this.processEvent('createYoutubeTimestampWithScreenshot', {
@@ -311,18 +315,24 @@ export class AnnotationsSidebarInPage extends AnnotationsSidebarContainer<
         }
 
         // Don't handle any external action that depend on cache until init logic has completed
-        await Promise.all([
-            this.initLogicPromise,
-            this.props.inPageUI.cacheLoadPromise,
-        ])
+        await Promise.all([this.props.inPageUI.cacheLoadPromise])
         if (event.action === 'selected_list_mode_from_web_ui') {
+            if (this.state.activeTab !== 'spaces') {
+                await this.processEvent('setActiveSidebarTab', {
+                    tab: 'spaces',
+                })
+            }
             await this.processEvent('setSelectedListFromWebUI', {
                 sharedListId: event.sharedListId,
                 manuallyPullLocalListData: event.manuallyPullLocalListData,
             })
         } else if (event.action === 'show_annotation') {
+            if (this.state.activeTab !== 'annotations') {
+                await this.processEvent('setActiveSidebarTab', {
+                    tab: 'annotations',
+                })
+            }
             await this.activateAnnotation(event.annotationCacheId, 'show')
-            await sleepPromise(500)
             if (
                 this.state.selectedListId &&
                 this.state.activeTab === 'spaces'
@@ -336,6 +346,11 @@ export class AnnotationsSidebarInPage extends AnnotationsSidebarContainer<
                 })
             }
         } else if (event.action === 'edit_annotation') {
+            if (this.state.activeTab !== 'annotations') {
+                await this.processEvent('setActiveSidebarTab', {
+                    tab: 'annotations',
+                })
+            }
             await this.processEvent('setAnnotationEditMode', {
                 instanceLocation:
                     this.state.selectedListId &&
@@ -359,6 +374,11 @@ export class AnnotationsSidebarInPage extends AnnotationsSidebarContainer<
                 'edit_spaces',
             )
         } else if (event.action === 'set_sharing_access') {
+            // if (this.state.activeTab !== 'annotations') {
+            //     await this.processEvent('setActiveSidebarTab', {
+            //         tab: 'annotations',
+            //     })
+            // }
             await this.processEvent('receiveSharingAccessChange', {
                 sharingAccess: event.annotationSharingAccess,
             })
@@ -370,15 +390,18 @@ export class AnnotationsSidebarInPage extends AnnotationsSidebarContainer<
             })
         } else if (event.action === 'cite_page') {
             await this.processEvent('setActiveSidebarTab', { tab: 'spaces' })
-            await sleepPromise(300)
             await this.processEvent('openPageCitationMenu', null)
         } else if (event.action === 'share_page_link') {
             await this.processEvent('setActiveSidebarTab', { tab: 'spaces' })
-            await sleepPromise(300)
             await this.processEvent('openPageLinkShareMenu', null)
         } else if (event.action === 'check_sidebar_status') {
             return true
         } else if (event.action === 'set_focus_mode') {
+            if (this.state.activeTab !== 'spaces') {
+                await this.processEvent('setActiveSidebarTab', {
+                    tab: 'spaces',
+                })
+            }
             const unifiedListId: UnifiedList['unifiedId'] = this.props.annotationsCache.getListByLocalId(
                 event.listId,
             ).unifiedId