H-3357: Improve loading speed and state for createdBy/updatedBy e…

…ntity table columns (#5217)
hashintel · Sep 23, 2024 · c6766dc · c6766dc
1 parent 6df2a34
commit c6766dc
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 30 deletions.
diff --git a/apps/hash-frontend/src/pages/shared/entities-table.tsx b/apps/hash-frontend/src/pages/shared/entities-table.tsx
@@ -342,6 +342,16 @@ export const EntitiesTable: FunctionComponent<{
             const actor =
               columnId === "lastEditedBy" ? row.lastEditedBy : row.createdBy;
 
+            if (actor === "loading") {
+              return {
+                kind: GridCellKind.Text,
+                readonly: true,
+                allowOverlay: false,
+                displayData: "Loading...",
+                data: "Loading...",
+              };
+            }
+
             const actorName = actor ? actor.displayName : undefined;
 
             const actorIcon = actor
@@ -481,10 +491,10 @@ export const EntitiesTable: FunctionComponent<{
     const lastEditedBySet = new Set<MinimalActor>();
     const createdBySet = new Set<MinimalActor>();
     for (const row of rows ?? []) {
-      if (row.lastEditedBy) {
+      if (row.lastEditedBy && row.lastEditedBy !== "loading") {
         lastEditedBySet.add(row.lastEditedBy);
       }
-      if (row.createdBy) {
+      if (row.createdBy && row.createdBy !== "loading") {
         createdBySet.add(row.createdBy);
       }
     }
@@ -566,7 +576,7 @@ export const EntitiesTable: FunctionComponent<{
         selectedFilterItemIds: selectedLastEditedByAccountIds,
         setSelectedFilterItemIds: setSelectedLastEditedByAccountIds,
         isRowFiltered: (row) =>
-          row.lastEditedBy
+          row.lastEditedBy && row.lastEditedBy !== "loading"
             ? !selectedLastEditedByAccountIds.includes(
                 row.lastEditedBy.accountId,
               )
@@ -581,7 +591,7 @@ export const EntitiesTable: FunctionComponent<{
         selectedFilterItemIds: selectedCreatedByAccountIds,
         setSelectedFilterItemIds: setSelectedCreatedByAccountIds,
         isRowFiltered: (row) =>
-          row.createdBy
+          row.createdBy && row.createdBy !== "loading"
             ? !selectedCreatedByAccountIds.includes(row.createdBy.accountId)
             : false,
       },

diff --git a/apps/hash-frontend/src/pages/shared/entities-table/use-entities-table.tsx b/apps/hash-frontend/src/pages/shared/entities-table/use-entities-table.tsx
@@ -31,9 +31,9 @@ export interface TypeEntitiesRow {
   entityTypeVersion: string;
   archived?: boolean;
   lastEdited: string;
-  lastEditedBy?: MinimalActor;
+  lastEditedBy?: MinimalActor | "loading";
   created: string;
-  createdBy?: MinimalActor;
+  createdBy?: MinimalActor | "loading";
   web: string;
   properties?: {
     [k: string]: string;
@@ -73,7 +73,9 @@ export const useEntitiesTable = (params: {
     [entities],
   );
 
-  const { actors } = useActors({ accountIds: editorActorIds });
+  const { actors, loading: actorsLoading } = useActors({
+    accountIds: editorActorIds,
+  });
 
   const getOwnerForEntity = useGetOwnerForEntity();
 
@@ -203,20 +205,25 @@ export const useEntitiesTable = (params: {
               "yyyy-MM-dd HH:mm",
             );
 
-            const lastEditedBy = actors?.find(
-              ({ accountId }) =>
-                accountId === entity.metadata.provenance.edition.createdById,
-            );
+            const lastEditedBy = actorsLoading
+              ? "loading"
+              : actors?.find(
+                  ({ accountId }) =>
+                    accountId ===
+                    entity.metadata.provenance.edition.createdById,
+                );
 
             const created = format(
               new Date(entity.metadata.provenance.createdAtDecisionTime),
               "yyyy-MM-dd HH:mm",
             );
 
-            const createdBy = actors?.find(
-              ({ accountId }) =>
-                accountId === entity.metadata.provenance.createdById,
-            );
+            const createdBy = actorsLoading
+              ? "loading"
+              : actors?.find(
+                  ({ accountId }) =>
+                    accountId === entity.metadata.provenance.createdById,
+                );
 
             return {
               rowId: entityId,
@@ -256,6 +263,8 @@ export const useEntitiesTable = (params: {
 
     return { columns, rows };
   }, [
+    actors,
+    actorsLoading,
     entities,
     entityTypes,
     getOwnerForEntity,
@@ -266,6 +275,5 @@ export const useEntitiesTable = (params: {
     hidePageArchivedColumn,
     hidePropertiesColumns,
     isViewingPages,
-    actors,
   ]);
 };
diff --git a/apps/hash-frontend/src/shared/use-actors.ts b/apps/hash-frontend/src/shared/use-actors.ts
@@ -51,20 +51,22 @@ export const useActors = (params: {
       includePermissions: false,
       request: {
         filter: {
-          any: (params.accountIds ?? []).map((accountId) => ({
-            all: [
-              {
-                equal: [
-                  { path: ["editionProvenance", "createdById"] },
-                  { parameter: accountId },
-                ],
-              },
-              generateVersionedUrlMatchingFilter(
-                systemEntityTypes.machine.entityTypeId,
-                { ignoreParents: true },
-              ),
-            ],
-          })),
+          any: (params.accountIds ? [...new Set(params.accountIds)] : []).map(
+            (accountId) => ({
+              all: [
+                {
+                  equal: [
+                    { path: ["editionProvenance", "createdById"] },
+                    { parameter: accountId },
+                  ],
+                },
+                generateVersionedUrlMatchingFilter(
+                  systemEntityTypes.machine.entityTypeId,
+                  { ignoreParents: true },
+                ),
+              ],
+            }),
+          ),
         },
         graphResolveDepths: zeroedGraphResolveDepths,
         temporalAxes: currentTimeInstantTemporalAxes,