From f30910f62843e58f7967abc0b3d49c433eb6914c Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Wed, 8 May 2024 09:40:37 +0200
Subject: [PATCH] fix: optimize table placeholder loading (#7002)

---
 .../FeatureToggleCell/FeatureToggleCell.tsx   |  6 +++++
 .../ProjectFeatureToggles.tsx                 | 22 ++++++++++++++-----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/FeatureToggleCell/FeatureToggleCell.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/FeatureToggleCell/FeatureToggleCell.tsx
index 1399d2a6fe..5c7da94e41 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/FeatureToggleCell/FeatureToggleCell.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/FeatureToggleCell/FeatureToggleCell.tsx
@@ -84,3 +84,9 @@ const FeatureToggleCellComponent = ({
 };
 
 export const FeatureToggleCell = React.memo(FeatureToggleCellComponent);
+
+export const PlaceholderFeatureToggleCell = () => (
+    <StyledSwitchContainer>
+        <div data-loading>toggle</div>
+    </StyledSwitchContainer>
+);
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
index 280e2f1de0..f51c2e3106 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
@@ -38,7 +38,10 @@ import { ProjectFeatureTogglesHeader } from './ProjectFeatureTogglesHeader/Proje
 import { createColumnHelper, useReactTable } from '@tanstack/react-table';
 import { withTableState } from 'utils/withTableState';
 import type { FeatureSearchResponseSchema } from 'openapi';
-import { FeatureToggleCell } from './FeatureToggleCell/FeatureToggleCell';
+import {
+    FeatureToggleCell,
+    PlaceholderFeatureToggleCell,
+} from './FeatureToggleCell/FeatureToggleCell';
 import { ProjectOverviewFilters } from './ProjectOverviewFilters';
 import { useDefaultColumnVisibility } from './hooks/useDefaultColumnVisibility';
 import { TableEmptyState } from './TableEmptyState/TableEmptyState';
@@ -121,6 +124,8 @@ export const ProjectFeatureToggles = ({
         setFeatureStaleDialogState,
     } = useRowActions(refetch, projectId);
 
+    const isPlaceholder = Boolean(initialLoad || (loading && total));
+
     const columns = useMemo(
         () => [
             columnHelper.display({
@@ -233,7 +238,9 @@ export const ProjectFeatureToggles = ({
                                 someEnabledEnvironmentHasVariants,
                             } = getValue();
 
-                            return (
+                            return isPlaceholder ? (
+                                <PlaceholderFeatureToggleCell />
+                            ) : (
                                 <FeatureToggleCell
                                     value={environment?.enabled || false}
                                     featureId={featureId}
@@ -273,7 +280,13 @@ export const ProjectFeatureToggles = ({
                 },
             }),
         ],
-        [projectId, environments, tableState.favoritesFirst, refetch],
+        [
+            projectId,
+            environments,
+            tableState.favoritesFirst,
+            refetch,
+            isPlaceholder,
+        ],
     );
 
     const placeholderData = useMemo(
@@ -305,7 +318,6 @@ export const ProjectFeatureToggles = ({
         [tableState.limit],
     );
 
-    const isPlaceholder = Boolean(initialLoad || (loading && total));
     const bodyLoadingRef = useLoading(isPlaceholder);
 
     const data = useMemo(() => {
@@ -313,7 +325,7 @@ export const ProjectFeatureToggles = ({
             return placeholderData;
         }
         return features;
-    }, [isPlaceholder, features]);
+    }, [isPlaceholder, JSON.stringify(features)]);
     const allColumnIds = useMemo(
         () => columns.map((column) => column.id).filter(Boolean) as string[],
         [columns],