Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-04 00:18:01 +01:00
Code Issues Projects Releases Wiki Activity

fix: optimize table placeholder loading (#7002)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-05-08 09:40:37 +02:00 committed by GitHub
parent 861ae6aa93
commit f30910f628
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/component/project/Project/PaginatedProjectFeatureToggles/FeatureToggleCell/FeatureToggleCell.tsx
View File

@ -84,3 +84,9 @@ const FeatureToggleCellComponent = ({
}; };
export const FeatureToggleCell = React.memo(FeatureToggleCellComponent); export const FeatureToggleCell = React.memo(FeatureToggleCellComponent);
export const PlaceholderFeatureToggleCell = () => (
<StyledSwitchContainer>
<div data-loading>toggle</div>
</StyledSwitchContainer>
);

22
frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
View File

@ -38,7 +38,10 @@ import { ProjectFeatureTogglesHeader } from './ProjectFeatureTogglesHeader/Proje
import { createColumnHelper, useReactTable } from '@tanstack/react-table'; import { createColumnHelper, useReactTable } from '@tanstack/react-table';
import { withTableState } from 'utils/withTableState'; import { withTableState } from 'utils/withTableState';
import type { FeatureSearchResponseSchema } from 'openapi'; import type { FeatureSearchResponseSchema } from 'openapi';
import { FeatureToggleCell } from './FeatureToggleCell/FeatureToggleCell'; import {
FeatureToggleCell,
PlaceholderFeatureToggleCell,
} from './FeatureToggleCell/FeatureToggleCell';
import { ProjectOverviewFilters } from './ProjectOverviewFilters'; import { ProjectOverviewFilters } from './ProjectOverviewFilters';
import { useDefaultColumnVisibility } from './hooks/useDefaultColumnVisibility'; import { useDefaultColumnVisibility } from './hooks/useDefaultColumnVisibility';
import { TableEmptyState } from './TableEmptyState/TableEmptyState'; import { TableEmptyState } from './TableEmptyState/TableEmptyState';
@ -121,6 +124,8 @@ export const ProjectFeatureToggles = ({
setFeatureStaleDialogState, setFeatureStaleDialogState,
} = useRowActions(refetch, projectId); } = useRowActions(refetch, projectId);
const isPlaceholder = Boolean(initialLoad || (loading && total));
const columns = useMemo( const columns = useMemo(
() => [ () => [
columnHelper.display({ columnHelper.display({
@ -233,7 +238,9 @@ export const ProjectFeatureToggles = ({
someEnabledEnvironmentHasVariants, someEnabledEnvironmentHasVariants,
} = getValue(); } = getValue();
return ( return isPlaceholder ? (
<PlaceholderFeatureToggleCell />
) : (
<FeatureToggleCell <FeatureToggleCell
value={environment?.enabled || false} value={environment?.enabled || false}
featureId={featureId} featureId={featureId}
@ -273,7 +280,13 @@ export const ProjectFeatureToggles = ({
}, },
}), }),
], ],
[projectId, environments, tableState.favoritesFirst, refetch], [
projectId,
environments,
tableState.favoritesFirst,
refetch,
isPlaceholder,
],
); );
const placeholderData = useMemo( const placeholderData = useMemo(
@ -305,7 +318,6 @@ export const ProjectFeatureToggles = ({
[tableState.limit], [tableState.limit],
); );
const isPlaceholder = Boolean(initialLoad || (loading && total));
const bodyLoadingRef = useLoading(isPlaceholder); const bodyLoadingRef = useLoading(isPlaceholder);
const data = useMemo(() => { const data = useMemo(() => {
@ -313,7 +325,7 @@ export const ProjectFeatureToggles = ({
return placeholderData; return placeholderData;
} }
return features; return features;
}, [isPlaceholder, features]); }, [isPlaceholder, JSON.stringify(features)]);
const allColumnIds = useMemo( const allColumnIds = useMemo(
() => columns.map((column) => column.id).filter(Boolean) as string[], () => columns.map((column) => column.id).filter(Boolean) as string[],
[columns], [columns],