chore: remove skeleton

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 <GridSkeleton includeTitle={false} includeTabs={false} />;
-      case DatabaseViewLayout.Board:
-        return <KanbanSkeleton includeTitle={false} includeTabs={false} />;
-      case DatabaseViewLayout.Calendar:
-        return <CalendarSkeleton includeTitle={false} includeTabs={false} />;
-      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 <Grid />;
@@ -136,7 +120,7 @@ function DatabaseViews({
       case DatabaseViewLayout.Calendar:
         return <Calendar />;
     }
-  }, [layout, isLoading, skeleton]);
+  }, [layout, isLoading]);
 
   useEffect(() => {
     if (!isLoading && viewContainerRef.current) {
@@ -279,7 +263,7 @@ function DatabaseViews({
                 : {}
             }
           >
-            <Suspense fallback={skeleton}>
+            <Suspense fallback={null}>
               <ErrorBoundary fallbackRender={ElementFallbackRender}>{view}</ErrorBoundary>
             </Suspense>
           </div>

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,

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 (
     <GridProvider>