From 0dd11721a108c3961d62dc913a7fc15cf67c0025 Mon Sep 17 00:00:00 2001
From: John Obelenus <jobelenus@systeminit.com>
Date: Wed, 18 Dec 2024 18:03:10 -0500
Subject: [PATCH] Fix: load all components at the right time

After first paint, but before the data is required by other things!
---
 app/web/src/store/components.store.ts | 18 ------------------
 app/web/src/store/views.store.ts      |  8 +++++---
 2 files changed, 5 insertions(+), 21 deletions(-)

diff --git a/app/web/src/store/components.store.ts b/app/web/src/store/components.store.ts
index de92af4c3a..58eabd7884 100644
--- a/app/web/src/store/components.store.ts
+++ b/app/web/src/store/components.store.ts
@@ -1399,29 +1399,11 @@ export const useComponentsStore = (forceChangeSetId?: ChangeSetId) => {
             ],
           );
 
-          realtimeStore.subscribe(
-            `${this.$id}-workspace`,
-            `workspace/${workspaceId}`,
-            [
-              {
-                eventType: "ChangeSetApplied",
-                callback: (data) => {
-                  // If the applied change set has rebased into this change set,
-                  // then refetch (i.e. there might be updates!)
-                  if (data.toRebaseChangeSetId === changeSetId) {
-                    this.FETCH_ALL_COMPONENTS();
-                  }
-                },
-              },
-            ],
-          );
-
           const actionUnsub = this.$onAction(handleStoreError);
 
           return () => {
             actionUnsub();
             realtimeStore.unsubscribe(`${this.$id}-changeset`);
-            realtimeStore.unsubscribe(`${this.$id}-workspace`);
           };
         },
       },
diff --git a/app/web/src/store/views.store.ts b/app/web/src/store/views.store.ts
index 8946a234ff..672a625a8c 100644
--- a/app/web/src/store/views.store.ts
+++ b/app/web/src/store/views.store.ts
@@ -642,14 +642,15 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => {
           this.recentViews.push(id);
         },
         async LIST_VIEWS(all = false) {
-          await componentsStore.FETCH_ALL_COMPONENTS();
-
           return new ApiRequest<ViewDescription[]>({
             method: "get",
             url: API_PREFIX,
             onSuccess: async (views) => {
               this.viewList = views;
               this.SORT_LIST_VIEWS();
+              if (!all)
+                // e.g. initial page load
+                await componentsStore.FETCH_ALL_COMPONENTS();
               for (const { id } of views) {
                 // assuming we're coming from "on load", we have the FETCH that gets the selectedViewId
                 if (all || id !== this.selectedViewId)
@@ -666,6 +667,7 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => {
           });
         },
         async FETCH_VIEW_GEOMETRY(viewId: ViewId) {
+          // requires all components to be in place!
           return new ApiRequest<{
             viewId: ViewId;
             name: string;
@@ -701,7 +703,6 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => {
                 ([componentId, geo]) => {
                   const node = componentsStore.allComponentsById[componentId];
                   if (!node) return;
-                  if (!view) return; // no idea why linting is complaining that i need this
                   let geometry: IRect;
                   if ("width" in node) {
                     geo.width = node.width;
@@ -1963,6 +1964,7 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => {
                 // If the applied change set has rebased into this change set,
                 // then refetch (i.e. there might be updates!)
                 if (data.toRebaseChangeSetId === changeSetId) {
+                  await componentsStore.FETCH_ALL_COMPONENTS();
                   this.LIST_VIEWS(true); // loads all other view data
                 }
               },