Show grid loading before new row

Author: appflowy

src/components/database/components/grid/grid-row/__tests__/useRenderRows.test.tsx

@@ -23,15 +23,15 @@ function createWrapper() {
 }
 
 describe('useRenderRows', () => {
-  it('keeps the new-row control available while rows are loading', () => {
+  it('renders the loading placeholder above the new-row control while rows are loading', () => {
     const { result } = renderHook(() => useRenderRows(undefined), {
       wrapper: createWrapper(),
     });
 
     expect(result.current.rows.map((row) => row.type)).toEqual([
       RenderRowType.Header,
-      RenderRowType.NewRow,
       RenderRowType.PlaceholderRow,
+      RenderRowType.NewRow,
     ]);
   });
 

src/components/database/components/grid/grid-row/useRenderRows.tsx

@@ -23,12 +23,12 @@ export function useRenderRows (rows?: Row[]) {
       {
         type: RenderRowType.Header,
       },
-      !readOnly && {
-        type: RenderRowType.NewRow,
-      },
       {
         type: RenderRowType.PlaceholderRow,
       },
+      !readOnly && {
+        type: RenderRowType.NewRow,
+      },
     ].filter(Boolean) as RenderRow[];
 
     // If rows are still loading, show placeholder rows

src/components/database/components/grid/grid-table/GridVirtualizer.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
-import { PADDING_END, useDatabaseContext, useDatabaseView } from '@/application/database-yjs';
-import { YjsDatabaseKey } from '@/application/types';
+import { PADDING_END, useDatabaseContext } from '@/application/database-yjs';
 import LoadingDots from '@/components/_shared/LoadingDots';
 import { GridDragContext } from '@/components/database/components/grid/drag-and-drop/GridDragContext';
 import { RenderColumn } from '@/components/database/components/grid/grid-column/useRenderFields';
@@ -22,8 +21,6 @@ function GridVirtualizer({ columns }: { columns: RenderColumn[] }) {
   const { rows: data, resizeRows, onResizeRowEnd } = useGridContext();
   const { handleResizeStart, isResizing } = useColumnResize(columns);
   const { isDocumentBlock, paddingEnd } = useDatabaseContext();
-  const view = useDatabaseView();
-  const hasConditions = (view?.get(YjsDatabaseKey.sorts)?.length ?? 0) > 0 || (view?.get(YjsDatabaseKey.filters)?.length ?? 0) > 0;
 
   const { parentRef, virtualizer, columnVirtualizer, scrollMarginTop, isReady } = useGridVirtualizer({
     data,
@@ -33,9 +30,6 @@ function GridVirtualizer({ columns }: { columns: RenderColumn[] }) {
   const rowItems = virtualizer.getVirtualItems();
   const columnItems = columnVirtualizer.getVirtualItems();
   const totalSize = columnVirtualizer.getTotalSize();
-  const hasRegularRows = data.some((row) => row.type === RenderRowType.Row);
-  const hasPlaceholderRow = data.some((row) => row.type === RenderRowType.PlaceholderRow);
-  const showEmptyBodyLoading = hasConditions && !hasRegularRows && !hasPlaceholderRow;
 
   const contextValue = useGridDnd(columns, virtualizer, columnVirtualizer);
   const bottomScrollbarRef = useRef<HTMLDivElement>(null);
@@ -234,21 +228,6 @@ function GridVirtualizer({ columns }: { columns: RenderColumn[] }) {
               </div>
             );
           })}
-          {showEmptyBodyLoading && (
-            <div
-              className={'absolute flex min-h-[240px] items-center justify-center'}
-              role={'status'}
-              style={{
-                top: 36,
-                left: 0,
-                paddingLeft: columnItems[0]?.start,
-                paddingRight: isDocumentBlock ? 0 : PADDING_INLINE,
-                width: totalSize - (paddingEnd ?? 0),
-              }}
-            >
-              <LoadingDots className={'flex items-center justify-center opacity-80'} />
-            </div>
-          )}
         </div>
         {!isDocumentBlock && (
           <DatabaseStickyTopOverlay>