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 (