Feat/pagination loading (#5325)

This PR makes changes to how the project overview skeleton screen works.
Important changes:

- Add skeleton screens to missing elements, creating a more
comprehensive loading screen
- Split the page into different loading sections, so that we can load
the table when we fetch the next page without affecting the rest of the
page.

https://www.loom.com/share/e5d30dc897ac488ea80cfae11ffab646

Next steps:
* Hide bar if total is less than 25
* Add FE testing

frontend/src/component/common/Search/Search.tsx

@@ -81,6 +81,7 @@ export const Search = ({
     containerStyles,
     expandable = false,
     debounceTime = 200,
+    ...rest
 }: ISearchProps) => {
     const searchInputRef = useRef<HTMLInputElement>(null);
     const searchContainerRef = useRef<HTMLInputElement>(null);
@@ -126,6 +127,7 @@ export const Search = ({
             ref={searchContainerRef}
             style={containerStyles}
             active={expandable && showSuggestions}
+            {...rest}
         >
             <StyledSearch className={className}>
                 <SearchIcon

frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx

@@ -13,7 +13,7 @@ export const SortableTableHeader = <T extends object>({
 }) => (
     <TableHead className={className}>
         {headerGroups.map((headerGroup) => (
-            <TableRow {...headerGroup.getHeaderGroupProps()}>
+            <TableRow {...headerGroup.getHeaderGroupProps()} data-loading>
                 {headerGroup.headers.map((column: HeaderGroup<T>) => {
                     const content = column.render('Header');
 

frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx

@@ -8,6 +8,7 @@ interface IFeatureSeenCellProps {
 
 export const FeatureEnvironmentSeenCell: VFC<IFeatureSeenCellProps> = ({
     feature,
+    ...rest
 }) => {
     const environments = feature.environments
         ? Object.values(feature.environments)
@@ -17,6 +18,7 @@ export const FeatureEnvironmentSeenCell: VFC<IFeatureSeenCellProps> = ({
         <FeatureEnvironmentSeen
             featureLastSeen={feature.lastSeenAt}
             environments={environments}
+            {...rest}
         />
     );
 };

frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenTooltip.tsx

@@ -72,7 +72,7 @@ export const LastSeenTooltip = ({
         Boolean(environment.lastSeenAt),
     );
     return (
-        <StyledDescription {...rest}>
+        <StyledDescription {...rest} data-loading>
             <StyledDescriptionHeader sx={{ mb: 0 }}>
                 Last usage reported
             </StyledDescriptionHeader>

frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx

@@ -74,6 +74,7 @@ export const FeatureEnvironmentSeen = ({
     featureLastSeen,
     environments,
     sx,
+    ...rest
 }: IFeatureEnvironmentSeenProps) => {
     const getColor = useLastSeenColors();
 
@@ -95,6 +96,7 @@ export const FeatureEnvironmentSeen = ({
                                     <LastSeenTooltip
                                         featureLastSeen={lastSeen}
                                         environments={environments}
+                                        {...rest}
                                     />
                                 }
                                 color={color}

frontend/src/component/project/Project/Project.tsx

@@ -228,6 +228,7 @@ export const Project = () => {
                         {filteredTabs.map((tab) => {
                             return (
                                 <StyledTab
+                                    data-loading
                                     key={tab.title}
                                     label={tab.title}
                                     value={tab.path}

frontend/src/component/project/Project/ProjectFeatureToggles/ActionsCell/ActionsCell.tsx

@@ -87,7 +87,7 @@ export const ActionsCell: VFC<IActionsCellProps> = ({
     };
 
     return (
-        <StyledBoxCell>
+        <StyledBoxCell data-loading>
             <Tooltip title='Feature toggle actions' arrow describeChild>
                 <IconButton
                     id={id}

frontend/src/component/project/Project/ProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx

@@ -62,6 +62,7 @@ import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { ListItemType } from './ProjectFeatureToggles.types';
 import { createFeatureToggleCell } from './FeatureToggleSwitch/createFeatureToggleCell';
 import { useFeatureToggleSwitch } from './FeatureToggleSwitch/useFeatureToggleSwitch';
+import useLoading from 'hooks/useLoading';
 
 const StyledResponsiveButton = styled(ResponsiveButton)(() => ({
     whiteSpace: 'nowrap',
@@ -73,6 +74,7 @@ interface IPaginatedProjectFeatureTogglesProps {
     loading: boolean;
     onChange: () => void;
     total?: number;
+    initialLoad: boolean;
     searchValue: string;
     setSearchValue: React.Dispatch<React.SetStateAction<string>>;
     paginationBar: JSX.Element;
@@ -87,6 +89,7 @@ const defaultSort: SortingRule<string> & {
 export const PaginatedProjectFeatureToggles = ({
     features,
     loading,
+    initialLoad,
     environments: newEnvironments = [],
     onChange,
     total,
@@ -95,6 +98,8 @@ export const PaginatedProjectFeatureToggles = ({
     paginationBar,
 }: IPaginatedProjectFeatureTogglesProps) => {
     const { classes: styles } = useStyles();
+    const bodyLoadingRef = useLoading(loading);
+    const headerLoadingRef = useLoading(initialLoad);
     const theme = useTheme();
     const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
     const [strategiesDialogState, setStrategiesDialogState] = useState({
@@ -198,7 +203,10 @@ export const PaginatedProjectFeatureToggles = ({
                 accessor: 'lastSeenAt',
                 Cell: ({ value, row: { original: feature } }: any) => {
                     return showEnvironmentLastSeen ? (
-                        <MemoizedFeatureEnvironmentSeenCell feature={feature} />
+                        <MemoizedFeatureEnvironmentSeenCell
+                            feature={feature}
+                            data-loading
+                        />
                     ) : (
                         <FeatureSeenCell value={value} />
                     );
@@ -355,15 +363,20 @@ export const PaginatedProjectFeatureToggles = ({
     );
 
     const data = useMemo(() => {
-        if (loading) {
+        if (initialLoad || loading) {
-            return Array(6).fill({
+            const loadingData = Array(15)
+                .fill(null)
+                .map((_, index) => ({
+                    id: index, // Assuming `id` is a required property
                     type: '-',
-                name: 'Feature name',
+                    name: `Feature name ${index}`,
-                createdAt: new Date(),
+                    createdAt: new Date().toISOString(),
                     environments: {
                         production: { name: 'production', enabled: false },
                     },
-            }) as FeatureSchema[];
+                }));
+            // Coerce loading data to FeatureSchema[]
+            return loadingData as unknown as FeatureSchema[];
         }
         return featuresData;
     }, [loading, featuresData]);
@@ -491,14 +504,17 @@ export const PaginatedProjectFeatureToggles = ({
     return (
         <>
             <PageContent
-                isLoading={loading}
+                disableLoading
                 className={styles.container}
                 sx={{ borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }}
                 header={
+                    <div ref={headerLoadingRef}>
                         <PageHeader
                             titleElement={
                                 showTitle
-                                ? `Feature toggles (${total || rows.length})`
+                                    ? `Feature toggles (${
+                                          total || rows.length
+                                      })`
                                     : null
                             }
                             actions={
@@ -507,14 +523,21 @@ export const PaginatedProjectFeatureToggles = ({
                                         condition={!isSmallScreen}
                                         show={
                                             <Search
+                                                data-loading
                                                 placeholder='Search and Filter'
                                                 expandable
                                                 initialValue={searchValue}
                                                 onChange={setSearchValue}
-                                            onFocus={() => setShowTitle(false)}
+                                                onFocus={() =>
-                                            onBlur={() => setShowTitle(true)}
+                                                    setShowTitle(false)
+                                                }
+                                                onBlur={() =>
+                                                    setShowTitle(true)
+                                                }
                                                 hasFilters
-                                            getSearchContext={getSearchContext}
+                                                getSearchContext={
+                                                    getSearchContext
+                                                }
                                                 id='projectFeatureToggles'
                                             />
                                         }
@@ -524,13 +547,18 @@ export const PaginatedProjectFeatureToggles = ({
                                         staticColumns={staticColumns}
                                         dividerAfter={['createdAt']}
                                         dividerBefore={['Actions']}
-                                    isCustomized={Boolean(storedParams.columns)}
+                                        isCustomized={Boolean(
+                                            storedParams.columns,
+                                        )}
                                         setHiddenColumns={setHiddenColumns}
                                     />
-                                <PageHeader.Divider sx={{ marginLeft: 0 }} />
+                                    <PageHeader.Divider
+                                        sx={{ marginLeft: 0 }}
+                                    />
                                     <ConditionallyRender
                                         condition={Boolean(
-                                        uiConfig?.flags?.featuresExportImport,
+                                            uiConfig?.flags
+                                                ?.featuresExportImport,
                                         )}
                                         show={
                                             <Tooltip
@@ -538,8 +566,11 @@ export const PaginatedProjectFeatureToggles = ({
                                                 arrow
                                             >
                                                 <IconButton
+                                                    data-loading
                                                     onClick={() =>
-                                                    setShowExportDialog(true)
+                                                        setShowExportDialog(
+                                                            true,
+                                                        )
                                                     }
                                                     sx={(theme) => ({
                                                         marginRight:
@@ -553,7 +584,9 @@ export const PaginatedProjectFeatureToggles = ({
                                     />
                                     <StyledResponsiveButton
                                         onClick={() =>
-                                        navigate(getCreateTogglePath(projectId))
+                                            navigate(
+                                                getCreateTogglePath(projectId),
+                                            )
                                         }
                                         maxWidth='960px'
                                         Icon={Add}
@@ -579,8 +612,10 @@ export const PaginatedProjectFeatureToggles = ({
                                 }
                             />
                         </PageHeader>
+                    </div>
                 }
             >
+                <div ref={bodyLoadingRef}>
                     <SearchHighlightProvider value={getSearchText(searchValue)}>
                         <VirtualizedTable
                             rows={rows}
@@ -588,6 +623,7 @@ export const PaginatedProjectFeatureToggles = ({
                             prepareRow={prepareRow}
                         />
                     </SearchHighlightProvider>
+
                     <ConditionallyRender
                         condition={rows.length === 0}
                         show={
@@ -595,15 +631,16 @@ export const PaginatedProjectFeatureToggles = ({
                                 condition={searchValue?.length > 0}
                                 show={
                                     <TablePlaceholder>
-                                    No feature toggles found matching &ldquo;
+                                        No feature toggles found matching
+                                        &ldquo;
                                         {searchValue}
                                         &rdquo;
                                     </TablePlaceholder>
                                 }
                                 elseShow={
                                     <TablePlaceholder>
-                                    No feature toggles available. Get started by
+                                        No feature toggles available. Get
-                                    adding a new feature toggle.
+                                        started by adding a new feature toggle.
                                     </TablePlaceholder>
                                 }
                             />
@@ -653,6 +690,7 @@ export const PaginatedProjectFeatureToggles = ({
                         }
                     />
                     {featureToggleModals}
+                </div>
             </PageContent>
 
             {paginationBar}

frontend/src/component/project/Project/ProjectFeatureToggles/RowSelectCell/RowSelectCell.tsx

@@ -20,7 +20,7 @@ export const RowSelectCell: FC<IRowSelectCellProps> = ({
     checked,
     title,
 }) => (
-    <StyledBoxCell data-testid={BATCH_SELECT}>
+    <StyledBoxCell data-testid={BATCH_SELECT} data-loading>
         <Checkbox onChange={onChange} title={title} checked={checked} />
     </StyledBoxCell>
 );

frontend/src/component/project/Project/ProjectInfo/HealthWidget.tsx

@@ -40,7 +40,7 @@ export const HealthWidget = ({ projectId, health }: IHealthWidgetProps) => {
                     gap: (theme) => theme.spacing(2),
                 }}
             >
-                <StyledPercentageText>
+                <StyledPercentageText data-loading>
                     <PercentageCircle percentage={health} />
                 </StyledPercentageText>
                 <StyledParagraphEmphasizedText data-loading>

frontend/src/component/project/Project/ProjectInfo/MetaWidget.tsx

@@ -24,8 +24,8 @@ const StyledIDContainer = styled('div')(({ theme }) => ({
 export const MetaWidget: FC<IMetaWidgetProps> = ({ id, description }) => {
     return (
         <StyledProjectInfoWidgetContainer>
-            <StyledWidgetTitle>Project Meta</StyledWidgetTitle>
+            <StyledWidgetTitle data-loading>Project Meta</StyledWidgetTitle>
-            <StyledIDContainer>
+            <StyledIDContainer data-loading>
                 <Typography
                     component='span'
                     variant='body2'
@@ -39,6 +39,7 @@ export const MetaWidget: FC<IMetaWidgetProps> = ({ id, description }) => {
                 condition={Boolean(description)}
                 show={
                     <Typography
+                        data-loading
                         variant='body2'
                         sx={{
                             marginTop: (theme) => theme.spacing(1.5),

frontend/src/component/project/Project/ProjectInfo/ProjectMembersWidget.tsx

@@ -30,6 +30,7 @@ export const ProjectMembersWidget = ({
         <StyledProjectInfoWidgetContainer>
             <StyledWidgetTitle data-loading>Project members</StyledWidgetTitle>
             <Box
+                data-loading
                 sx={{
                     display: 'flex',
                     justifyContent: 'center',
@@ -37,7 +38,9 @@ export const ProjectMembersWidget = ({
             >
                 <StatusBox boxText={`${memberCount}`} change={change} />
             </Box>
-            <WidgetFooterLink to={link}>View all members</WidgetFooterLink>
+            <WidgetFooterLink data-loading to={link}>
+                View all members
+            </WidgetFooterLink>
         </StyledProjectInfoWidgetContainer>
     );
 };

frontend/src/component/project/Project/ProjectInfo/ToggleTypesWidget.tsx

@@ -84,7 +84,9 @@ export const ToggleTypesWidget = ({ features }: IToggleTypesWidgetProps) => {
         <StyledProjectInfoWidgetContainer
             sx={{ padding: (theme) => theme.spacing(3) }}
         >
-            <StyledWidgetTitle>Toggle types used</StyledWidgetTitle>
+            <StyledWidgetTitle data-loading>
+                Toggle types used
+            </StyledWidgetTitle>
             {Object.keys(featureTypeStats).map((type) => (
                 <ToggleTypesRow
                     type={type}

frontend/src/component/project/Project/ProjectInfo/WidgetFooterLink.tsx

@@ -12,6 +12,7 @@ export const WidgetFooterLink: FC<IWidgetFooterLinkProps> = ({
 }) => {
     return (
         <Typography
+            data-loading
             variant='body2'
             textAlign='center'
             sx={{

frontend/src/component/project/Project/ProjectOverview.tsx

@@ -45,7 +45,7 @@ const PaginatedProjectOverview = () => {
     const { project, loading: projectLoading } = useProject(projectId, {
         refreshInterval,
     });
-    const [pageLimit, setPageLimit] = useState(10);
+    const [pageLimit, setPageLimit] = useState(25);
     const [currentOffset, setCurrentOffset] = useState(0);
 
     const [searchValue, setSearchValue] = useState(
@@ -57,6 +57,7 @@ const PaginatedProjectOverview = () => {
         total,
         refetch,
         loading,
+        initialLoad,
     } = useFeatureSearch(currentOffset, pageLimit, projectId, searchValue, {
         refreshInterval,
     });
@@ -96,6 +97,7 @@ const PaginatedProjectOverview = () => {
                         }
                         features={searchFeatures}
                         environments={environments}
+                        initialLoad={initialLoad && searchFeatures.length === 0}
                         loading={loading && searchFeatures.length === 0}
                         onChange={refetch}
                         total={total}
@@ -128,7 +130,7 @@ const StyledStickyBar = styled('div')(({ theme }) => ({
     backgroundColor: theme.palette.background.paper,
     padding: theme.spacing(2),
     marginLeft: theme.spacing(2),
-    zIndex: theme.zIndex.mobileStepper,
+    zIndex: 9999,
     borderBottomLeftRadius: theme.shape.borderRadiusMedium,
     borderBottomRightRadius: theme.shape.borderRadiusMedium,
     borderTop: `1px solid ${theme.palette.divider}`,

frontend/src/component/project/Project/ProjectStats/StatusBox.tsx

@@ -65,7 +65,11 @@ export const StatusBox: FC<IStatusBoxProps> = ({
     <>
         <ConditionallyRender
             condition={Boolean(title)}
-            show={<StyledTypographyHeader>{title}</StyledTypographyHeader>}
+            show={
+                <StyledTypographyHeader data-loading>
+                    {title}
+                </StyledTypographyHeader>
+            }
         />
         {children}
         <Box
@@ -75,11 +79,13 @@ export const StatusBox: FC<IStatusBoxProps> = ({
                 width: 'auto',
             }}
         >
-            <StyledTypographyCount>{boxText}</StyledTypographyCount>
+            <StyledTypographyCount data-loading>
+                {boxText}
+            </StyledTypographyCount>
             <ConditionallyRender
                 condition={Boolean(customChangeElement)}
                 show={
-                    <StyledBoxChangeContainer>
+                    <StyledBoxChangeContainer data-loading>
                         {customChangeElement}
                     </StyledBoxChangeContainer>
                 }
@@ -87,7 +93,7 @@ export const StatusBox: FC<IStatusBoxProps> = ({
                     <ConditionallyRender
                         condition={change !== undefined && change !== 0}
                         show={
-                            <StyledBoxChangeContainer>
+                            <StyledBoxChangeContainer data-loading>
                                 <Box
                                     sx={{
                                         ...flexRow,
@@ -109,7 +115,7 @@ export const StatusBox: FC<IStatusBoxProps> = ({
                         }
                         elseShow={
                             <StyledBoxChangeContainer>
-                                <StyledTypographySubtext>
+                                <StyledTypographySubtext data-loading>
                                     No change
                                 </StyledTypographySubtext>
                             </StyledBoxChangeContainer>

frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap

@@ -119,6 +119,7 @@ exports[`renders an empty list correctly 1`] = `
           >
             <tr
               className="MuiTableRow-root MuiTableRow-head css-15lapfi-MuiTableRow-root"
+              data-loading={true}
               role="row"
             >
               <th

frontend/src/hooks/api/getters/useFeatureSearch/useFeatureSearch.ts

@@ -14,6 +14,7 @@ interface IUseFeatureSearchOutput {
     features: IFeatureToggleListItem[];
     total: number;
     loading: boolean;
+    initialLoad: boolean;
     error: string;
     refetch: () => void;
 }
@@ -26,38 +27,52 @@ const fallbackData: {
     total: 0,
 };
 
-export const useFeatureSearch = (
+const createFeatureSearch = () => {
+    let total = 0;
+    let initialLoad = true;
+
+    return (
         offset: number,
         limit: number,
         projectId = '',
         searchValue = '',
         options: SWRConfiguration = {},
-): IUseFeatureSearchOutput => {
+    ): IUseFeatureSearchOutput => {
         const { KEY, fetcher } = getFeatureSearchFetcher(
             projectId,
             offset,
             limit,
             searchValue,
         );
-    const { data, error, mutate } = useSWR<IFeatureSearchResponse>(
+        const { data, error, mutate, isLoading } =
-        KEY,
+            useSWR<IFeatureSearchResponse>(KEY, fetcher, options);
-        fetcher,
-        options,
-    );
 
         const refetch = useCallback(() => {
             mutate();
         }, [mutate]);
 
+        if (data?.total) {
+            total = data.total;
+        }
+
+        if (!isLoading && initialLoad) {
+            initialLoad = false;
+        }
+
         const returnData = data || fallbackData;
         return {
             ...returnData,
-        loading: false,
+            loading: isLoading,
             error,
             refetch,
+            total,
+            initialLoad: isLoading && initialLoad,
+        };
     };
 };
 
+export const useFeatureSearch = createFeatureSearch();
+
 const getFeatureSearchFetcher = (
     projectId: string,
     offset: number,

frontend/src/hooks/useLoading.ts

@@ -12,7 +12,7 @@ const useLoading = (loading: boolean, selector = '[data-loading=true]') => {
                 if (loading) {
                     element.classList.add('skeleton');
                 } else {
-                    element.classList.remove('skeleton');
+                    setTimeout(() => element.classList.remove('skeleton'), 10);
                 }
             });
         }

frontend/src/themes/app.css

@@ -36,7 +36,7 @@ button {
 .skeleton {
     position: relative;
     overflow: hidden;
-    z-index: 9999;
+    z-index: 9990;
     box-shadow: none;
     fill: none;
     pointer-events: none;