Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +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 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 { 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],