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 = () => (
+
+ toggle
+
+);
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 ? (
+
+ ) : (
{
@@ -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],