diff --git a/src/components/database/DatabaseViews.tsx b/src/components/database/DatabaseViews.tsx index 000a4c1a..345ce276 100644 --- a/src/components/database/DatabaseViews.tsx +++ b/src/components/database/DatabaseViews.tsx @@ -3,9 +3,6 @@ import { ErrorBoundary } from 'react-error-boundary'; import { useDatabaseViewsSelector } from '@/application/database-yjs'; import { DatabaseViewLayout, YjsDatabaseKey } from '@/application/types'; -import CalendarSkeleton from '@/components/_shared/skeleton/CalendarSkeleton'; -import GridSkeleton from '@/components/_shared/skeleton/GridSkeleton'; -import KanbanSkeleton from '@/components/_shared/skeleton/KanbanSkeleton'; import { Board } from '@/components/database/board'; import { DatabaseConditionsContext } from '@/components/database/components/conditions/context'; import { DatabaseTabs } from '@/components/database/components/tabs'; @@ -112,22 +109,9 @@ function DatabaseViews({ [fixedHeight, onChangeView] ); - const skeleton = useMemo(() => { - switch (layout) { - case DatabaseViewLayout.Grid: - return ; - case DatabaseViewLayout.Board: - return ; - case DatabaseViewLayout.Calendar: - return ; - default: - return null; - } - }, [layout]); - // Simple conditional rendering - Board's autoScrollForElements doesn't support keep-alive const view = useMemo(() => { - if (isLoading) return skeleton; + if (isLoading) return null; switch (layout) { case DatabaseViewLayout.Grid: return ; @@ -136,7 +120,7 @@ function DatabaseViews({ case DatabaseViewLayout.Calendar: return ; } - }, [layout, isLoading, skeleton]); + }, [layout, isLoading]); useEffect(() => { if (!isLoading && viewContainerRef.current) { @@ -279,7 +263,7 @@ function DatabaseViews({ : {} } > - + {view} diff --git a/src/components/database/components/grid/grid-row/useRenderRows.tsx b/src/components/database/components/grid/grid-row/useRenderRows.tsx index e799685a..7498ddc3 100644 --- a/src/components/database/components/grid/grid-row/useRenderRows.tsx +++ b/src/components/database/components/grid/grid-row/useRenderRows.tsx @@ -7,6 +7,7 @@ export enum RenderRowType { Row = 'row', NewRow = 'new-row', CalculateRow = 'calculate-row', + PlaceholderRow = 'placeholder-row', } export type RenderRow = { @@ -19,6 +20,18 @@ export function useRenderRows () { const readOnly = useReadOnly(); const renderRows = useMemo(() => { + // If rows are still loading, show placeholder rows + if (rows === undefined) { + return [ + { + type: RenderRowType.Header, + }, + { + type: RenderRowType.CalculateRow, + }, + ].filter(Boolean) as RenderRow[]; + } + const rowItems = rows?.map((row) => ({ type: RenderRowType.Row, diff --git a/src/components/database/grid/Grid.tsx b/src/components/database/grid/Grid.tsx index 260b23fb..25fb1cbc 100644 --- a/src/components/database/grid/Grid.tsx +++ b/src/components/database/grid/Grid.tsx @@ -1,6 +1,6 @@ import { useEffect } from 'react'; -import { useDatabaseContext, useDatabaseViewId } from '@/application/database-yjs'; +import { useDatabaseContext, useDatabaseViewId, useRowOrdersSelector } from '@/application/database-yjs'; import { useRenderFields } from '@/components/database/components/grid/grid-column'; import GridVirtualizer from '@/components/database/components/grid/grid-table/GridVirtualizer'; import { GridProvider } from '@/components/database/grid/GridProvider'; @@ -8,14 +8,15 @@ import { GridProvider } from '@/components/database/grid/GridProvider'; export function Grid() { const { fields } = useRenderFields(); const viewId = useDatabaseViewId(); + const rows = useRowOrdersSelector(); const { onRendered } = useDatabaseContext(); useEffect(() => { - if (fields) { + if (fields && rows !== undefined) { onRendered?.(); } - }, [fields, onRendered]); + }, [fields, rows, onRendered]); return (