chore: show loading indicator

Author: appflowy

src/application/database-yjs/context.ts

@@ -301,6 +301,18 @@ export const useRowData = (rowId: string) => {
   return useRow(rowId)?.get(YjsEditorKey.database_row) as YDatabaseRow;
 };
 
+/**
+ * Returns true once the row's collab content has been loaded into the local
+ * doc (i.e. the `database_row` YMap is present in the row's data_section).
+ * Useful for showing a loading indicator on rows that have no local
+ * IndexedDB cache yet while their first sync arrives.
+ */
+export const useIsRowLoaded = (rowId: string) => {
+  const dataSection = useRow(rowId);
+
+  return Boolean(dataSection?.has(YjsEditorKey.database_row));
+};
+
 /**
  * Returns the currently active view tab ID.
  * This is the view that is currently being displayed (Grid, Board, or Calendar).

src/components/database/components/cell/primary/PrimaryCell.tsx

@@ -1,6 +1,8 @@
 import { useMemo, useRef } from 'react';
 
-import { RowMetaKey, useDatabaseContext, useRowMetaSelector } from '@/application/database-yjs';
+import CircularProgress from '@mui/material/CircularProgress';
+
+import { RowMetaKey, useDatabaseContext, useIsRowLoaded, useRowMetaSelector } from '@/application/database-yjs';
 import { Cell as CellType, CellProps } from '@/application/database-yjs/cell.type';
 import { useUpdateRowMetaDispatch } from '@/application/database-yjs/dispatch';
 import { ReactComponent as DocumentSvg } from '@/assets/icons/doc.svg';
@@ -16,6 +18,7 @@ export function PrimaryCell(props: CellProps<CellType>) {
   const ref = useRef<HTMLDivElement>(null);
   const meta = useRowMetaSelector(rowId);
   const navigateToRow = useDatabaseContext().navigateToRow;
+  const isRowLoaded = useIsRowLoaded(rowId);
 
   const hasDocument = meta?.isEmptyDocument === false;
   const icon = meta?.icon;
@@ -69,7 +72,15 @@ export function PrimaryCell(props: CellProps<CellType>) {
       </CustomIconPopover>
 
       <div className={'flex flex-1 items-center overflow-x-hidden'}>
-        <DatabaseCell {...props} />
+        {isRowLoaded ? (
+          <DatabaseCell {...props} />
+        ) : (
+          <CircularProgress
+            size={14}
+            className={'text-icon-secondary'}
+            data-testid={`primary-cell-loading-${rowId}`}
+          />
+        )}
       </div>
     </div>
   );

src/components/database/components/grid/grid-cell/GridRowCell.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { FieldType, useCellSelector, useFieldWrap, useReadOnly } from '@/application/database-yjs';
+import { FieldType, useCellSelector, useFieldWrap, useIsRowLoaded, useReadOnly } from '@/application/database-yjs';
 import { CellProps, Cell as CellType } from '@/application/database-yjs/cell.type';
 import { useFieldSelector } from '@/application/database-yjs/selector';
 import { FieldId, YjsDatabaseKey } from '@/application/types';
@@ -26,6 +26,7 @@ export function GridRowCell({ rowId, fieldId }: GridCellProps) {
   const isPrimary = field?.get(YjsDatabaseKey.is_primary);
   const disableRelationRollupEdit = isFieldEditingDisabled(fieldType as FieldType);
   const isReadOnlyCell = readOnly || disableRelationRollupEdit;
+  const isRowLoaded = useIsRowLoaded(rowId);
   const cell = useCellSelector({
     rowId,
     fieldId,
@@ -118,6 +119,19 @@ export function GridRowCell({ rowId, fieldId }: GridCellProps) {
 
   if (!field) return null;
 
+  // While the row's collab content is still loading from IndexedDB/network,
+  // render blank non-primary cells. The primary cell renders a loading
+  // indicator (handled inside PrimaryCell).
+  if (!isRowLoaded && !isPrimary) {
+    return (
+      <div
+        ref={ref}
+        data-testid={`grid-cell-${rowId}-${fieldId}`}
+        className={cn('grid-cell flex h-full w-full items-start overflow-hidden px-2 text-sm', paddingVertical)}
+      />
+    );
+  }
+
   return (
     <div
       ref={ref}