diff --git a/frontend/src/component/common/Search/Search.tsx b/frontend/src/component/common/Search/Search.tsx
index 7dba5a3aab..66db56540c 100644
--- a/frontend/src/component/common/Search/Search.tsx
+++ b/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
diff --git a/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx b/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx
index f875c47f9b..10acba2d2b 100644
--- a/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx
+++ b/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');
 
diff --git a/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx b/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx
index 6d85342a3b..a181ba0d65 100644
--- a/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx
+++ b/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}
         />
     );
 };
diff --git a/frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenTooltip.tsx b/frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenTooltip.tsx
index 18c7b6d986..0bc9563edd 100644
--- a/frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenTooltip.tsx
+++ b/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>
diff --git a/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx b/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx
index 8e2253674c..9b62625dfd 100644
--- a/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx
+++ b/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}
diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
index f84c3eeb41..718202199a 100644
--- a/frontend/src/component/project/Project/Project.tsx
+++ b/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}
diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ActionsCell/ActionsCell.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ActionsCell/ActionsCell.tsx
index 837841b98b..cf76bc1d7d 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ActionsCell/ActionsCell.tsx
+++ b/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}
diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx
index 5f5390053a..d49c0cf905 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx
+++ b/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) {
-            return Array(6).fill({
-                type: '-',
-                name: 'Feature name',
-                createdAt: new Date(),
-                environments: {
-                    production: { name: 'production', enabled: false },
-                },
-            }) as FeatureSchema[];
+        if (initialLoad || loading) {
+            const loadingData = Array(15)
+                .fill(null)
+                .map((_, index) => ({
+                    id: index, // Assuming `id` is a required property
+                    type: '-',
+                    name: `Feature name ${index}`,
+                    createdAt: new Date().toISOString(),
+                    environments: {
+                        production: { name: 'production', enabled: false },
+                    },
+                }));
+            // Coerce loading data to FeatureSchema[]
+            return loadingData as unknown as FeatureSchema[];
         }
         return featuresData;
     }, [loading, featuresData]);
@@ -491,168 +504,193 @@ export const PaginatedProjectFeatureToggles = ({
     return (
         <>
             <PageContent
-                isLoading={loading}
+                disableLoading
                 className={styles.container}
                 sx={{ borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }}
                 header={
-                    <PageHeader
-                        titleElement={
-                            showTitle
-                                ? `Feature toggles (${total || rows.length})`
-                                : null
-                        }
-                        actions={
-                            <>
-                                <ConditionallyRender
-                                    condition={!isSmallScreen}
-                                    show={
-                                        <Search
-                                            placeholder='Search and Filter'
-                                            expandable
-                                            initialValue={searchValue}
-                                            onChange={setSearchValue}
-                                            onFocus={() => setShowTitle(false)}
-                                            onBlur={() => setShowTitle(true)}
-                                            hasFilters
-                                            getSearchContext={getSearchContext}
-                                            id='projectFeatureToggles'
-                                        />
-                                    }
-                                />
-                                <ColumnsMenu
-                                    allColumns={allColumns}
-                                    staticColumns={staticColumns}
-                                    dividerAfter={['createdAt']}
-                                    dividerBefore={['Actions']}
-                                    isCustomized={Boolean(storedParams.columns)}
-                                    setHiddenColumns={setHiddenColumns}
-                                />
-                                <PageHeader.Divider sx={{ marginLeft: 0 }} />
-                                <ConditionallyRender
-                                    condition={Boolean(
-                                        uiConfig?.flags?.featuresExportImport,
-                                    )}
-                                    show={
-                                        <Tooltip
-                                            title='Export toggles visible in the table below'
-                                            arrow
-                                        >
-                                            <IconButton
-                                                onClick={() =>
-                                                    setShowExportDialog(true)
-                                                }
-                                                sx={(theme) => ({
-                                                    marginRight:
-                                                        theme.spacing(2),
-                                                })}
-                                            >
-                                                <FileDownload />
-                                            </IconButton>
-                                        </Tooltip>
-                                    }
-                                />
-                                <StyledResponsiveButton
-                                    onClick={() =>
-                                        navigate(getCreateTogglePath(projectId))
-                                    }
-                                    maxWidth='960px'
-                                    Icon={Add}
-                                    projectId={projectId}
-                                    permission={CREATE_FEATURE}
-                                    data-testid='NAVIGATE_TO_CREATE_FEATURE'
-                                >
-                                    New feature toggle
-                                </StyledResponsiveButton>
-                            </>
-                        }
-                    >
-                        <ConditionallyRender
-                            condition={isSmallScreen}
-                            show={
-                                <Search
-                                    initialValue={searchValue}
-                                    onChange={setSearchValue}
-                                    hasFilters
-                                    getSearchContext={getSearchContext}
-                                    id='projectFeatureToggles'
-                                />
+                    <div ref={headerLoadingRef}>
+                        <PageHeader
+                            titleElement={
+                                showTitle
+                                    ? `Feature toggles (${
+                                          total || rows.length
+                                      })`
+                                    : null
                             }
-                        />
-                    </PageHeader>
+                            actions={
+                                <>
+                                    <ConditionallyRender
+                                        condition={!isSmallScreen}
+                                        show={
+                                            <Search
+                                                data-loading
+                                                placeholder='Search and Filter'
+                                                expandable
+                                                initialValue={searchValue}
+                                                onChange={setSearchValue}
+                                                onFocus={() =>
+                                                    setShowTitle(false)
+                                                }
+                                                onBlur={() =>
+                                                    setShowTitle(true)
+                                                }
+                                                hasFilters
+                                                getSearchContext={
+                                                    getSearchContext
+                                                }
+                                                id='projectFeatureToggles'
+                                            />
+                                        }
+                                    />
+                                    <ColumnsMenu
+                                        allColumns={allColumns}
+                                        staticColumns={staticColumns}
+                                        dividerAfter={['createdAt']}
+                                        dividerBefore={['Actions']}
+                                        isCustomized={Boolean(
+                                            storedParams.columns,
+                                        )}
+                                        setHiddenColumns={setHiddenColumns}
+                                    />
+                                    <PageHeader.Divider
+                                        sx={{ marginLeft: 0 }}
+                                    />
+                                    <ConditionallyRender
+                                        condition={Boolean(
+                                            uiConfig?.flags
+                                                ?.featuresExportImport,
+                                        )}
+                                        show={
+                                            <Tooltip
+                                                title='Export toggles visible in the table below'
+                                                arrow
+                                            >
+                                                <IconButton
+                                                    data-loading
+                                                    onClick={() =>
+                                                        setShowExportDialog(
+                                                            true,
+                                                        )
+                                                    }
+                                                    sx={(theme) => ({
+                                                        marginRight:
+                                                            theme.spacing(2),
+                                                    })}
+                                                >
+                                                    <FileDownload />
+                                                </IconButton>
+                                            </Tooltip>
+                                        }
+                                    />
+                                    <StyledResponsiveButton
+                                        onClick={() =>
+                                            navigate(
+                                                getCreateTogglePath(projectId),
+                                            )
+                                        }
+                                        maxWidth='960px'
+                                        Icon={Add}
+                                        projectId={projectId}
+                                        permission={CREATE_FEATURE}
+                                        data-testid='NAVIGATE_TO_CREATE_FEATURE'
+                                    >
+                                        New feature toggle
+                                    </StyledResponsiveButton>
+                                </>
+                            }
+                        >
+                            <ConditionallyRender
+                                condition={isSmallScreen}
+                                show={
+                                    <Search
+                                        initialValue={searchValue}
+                                        onChange={setSearchValue}
+                                        hasFilters
+                                        getSearchContext={getSearchContext}
+                                        id='projectFeatureToggles'
+                                    />
+                                }
+                            />
+                        </PageHeader>
+                    </div>
                 }
             >
-                <SearchHighlightProvider value={getSearchText(searchValue)}>
-                    <VirtualizedTable
-                        rows={rows}
-                        headerGroups={headerGroups}
-                        prepareRow={prepareRow}
+                <div ref={bodyLoadingRef}>
+                    <SearchHighlightProvider value={getSearchText(searchValue)}>
+                        <VirtualizedTable
+                            rows={rows}
+                            headerGroups={headerGroups}
+                            prepareRow={prepareRow}
+                        />
+                    </SearchHighlightProvider>
+
+                    <ConditionallyRender
+                        condition={rows.length === 0}
+                        show={
+                            <ConditionallyRender
+                                condition={searchValue?.length > 0}
+                                show={
+                                    <TablePlaceholder>
+                                        No feature toggles found matching
+                                        &ldquo;
+                                        {searchValue}
+                                        &rdquo;
+                                    </TablePlaceholder>
+                                }
+                                elseShow={
+                                    <TablePlaceholder>
+                                        No feature toggles available. Get
+                                        started by adding a new feature toggle.
+                                    </TablePlaceholder>
+                                }
+                            />
+                        }
                     />
-                </SearchHighlightProvider>
-                <ConditionallyRender
-                    condition={rows.length === 0}
-                    show={
-                        <ConditionallyRender
-                            condition={searchValue?.length > 0}
-                            show={
-                                <TablePlaceholder>
-                                    No feature toggles found matching &ldquo;
-                                    {searchValue}
-                                    &rdquo;
-                                </TablePlaceholder>
-                            }
-                            elseShow={
-                                <TablePlaceholder>
-                                    No feature toggles available. Get started by
-                                    adding a new feature toggle.
-                                </TablePlaceholder>
-                            }
-                        />
-                    }
-                />
-                <EnvironmentStrategyDialog
-                    onClose={() =>
-                        setStrategiesDialogState((prev) => ({
-                            ...prev,
-                            open: false,
-                        }))
-                    }
-                    projectId={projectId}
-                    {...strategiesDialogState}
-                />
-                <FeatureStaleDialog
-                    isStale={featureStaleDialogState.stale === true}
-                    isOpen={Boolean(featureStaleDialogState.featureId)}
-                    onClose={() => {
-                        setFeatureStaleDialogState({});
-                        onChange();
-                    }}
-                    featureId={featureStaleDialogState.featureId || ''}
-                    projectId={projectId}
-                />
-                <FeatureArchiveDialog
-                    isOpen={Boolean(featureArchiveState)}
-                    onConfirm={onChange}
-                    onClose={() => {
-                        setFeatureArchiveState(undefined);
-                    }}
-                    featureIds={[featureArchiveState || '']}
-                    projectId={projectId}
-                />
-                <ConditionallyRender
-                    condition={
-                        Boolean(uiConfig?.flags?.featuresExportImport) &&
-                        !loading
-                    }
-                    show={
-                        <ExportDialog
-                            showExportDialog={showExportDialog}
-                            data={data}
-                            onClose={() => setShowExportDialog(false)}
-                            environments={environments}
-                        />
-                    }
-                />
-                {featureToggleModals}
+                    <EnvironmentStrategyDialog
+                        onClose={() =>
+                            setStrategiesDialogState((prev) => ({
+                                ...prev,
+                                open: false,
+                            }))
+                        }
+                        projectId={projectId}
+                        {...strategiesDialogState}
+                    />
+                    <FeatureStaleDialog
+                        isStale={featureStaleDialogState.stale === true}
+                        isOpen={Boolean(featureStaleDialogState.featureId)}
+                        onClose={() => {
+                            setFeatureStaleDialogState({});
+                            onChange();
+                        }}
+                        featureId={featureStaleDialogState.featureId || ''}
+                        projectId={projectId}
+                    />
+                    <FeatureArchiveDialog
+                        isOpen={Boolean(featureArchiveState)}
+                        onConfirm={onChange}
+                        onClose={() => {
+                            setFeatureArchiveState(undefined);
+                        }}
+                        featureIds={[featureArchiveState || '']}
+                        projectId={projectId}
+                    />
+                    <ConditionallyRender
+                        condition={
+                            Boolean(uiConfig?.flags?.featuresExportImport) &&
+                            !loading
+                        }
+                        show={
+                            <ExportDialog
+                                showExportDialog={showExportDialog}
+                                data={data}
+                                onClose={() => setShowExportDialog(false)}
+                                environments={environments}
+                            />
+                        }
+                    />
+                    {featureToggleModals}
+                </div>
             </PageContent>
 
             {paginationBar}
diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/RowSelectCell/RowSelectCell.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/RowSelectCell/RowSelectCell.tsx
index 4636a2cd40..a77672ba08 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/RowSelectCell/RowSelectCell.tsx
+++ b/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>
 );
diff --git a/frontend/src/component/project/Project/ProjectInfo/HealthWidget.tsx b/frontend/src/component/project/Project/ProjectInfo/HealthWidget.tsx
index d70a01ec48..30ee7b1c2c 100644
--- a/frontend/src/component/project/Project/ProjectInfo/HealthWidget.tsx
+++ b/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>
diff --git a/frontend/src/component/project/Project/ProjectInfo/MetaWidget.tsx b/frontend/src/component/project/Project/ProjectInfo/MetaWidget.tsx
index 69404315b1..3043e4fc1d 100644
--- a/frontend/src/component/project/Project/ProjectInfo/MetaWidget.tsx
+++ b/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>
-            <StyledIDContainer>
+            <StyledWidgetTitle data-loading>Project Meta</StyledWidgetTitle>
+            <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),
diff --git a/frontend/src/component/project/Project/ProjectInfo/ProjectMembersWidget.tsx b/frontend/src/component/project/Project/ProjectInfo/ProjectMembersWidget.tsx
index eba45e5ce8..82fade8b04 100644
--- a/frontend/src/component/project/Project/ProjectInfo/ProjectMembersWidget.tsx
+++ b/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>
     );
 };
diff --git a/frontend/src/component/project/Project/ProjectInfo/ToggleTypesWidget.tsx b/frontend/src/component/project/Project/ProjectInfo/ToggleTypesWidget.tsx
index fb41a0ab5e..ff052ba828 100644
--- a/frontend/src/component/project/Project/ProjectInfo/ToggleTypesWidget.tsx
+++ b/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}
diff --git a/frontend/src/component/project/Project/ProjectInfo/WidgetFooterLink.tsx b/frontend/src/component/project/Project/ProjectInfo/WidgetFooterLink.tsx
index bbaa793fdb..d8d80f2621 100644
--- a/frontend/src/component/project/Project/ProjectInfo/WidgetFooterLink.tsx
+++ b/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={{
diff --git a/frontend/src/component/project/Project/ProjectOverview.tsx b/frontend/src/component/project/Project/ProjectOverview.tsx
index 00e2de7386..1a4523bb2d 100644
--- a/frontend/src/component/project/Project/ProjectOverview.tsx
+++ b/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}`,
diff --git a/frontend/src/component/project/Project/ProjectStats/StatusBox.tsx b/frontend/src/component/project/Project/ProjectStats/StatusBox.tsx
index 50de0f9c67..c703f98118 100644
--- a/frontend/src/component/project/Project/ProjectStats/StatusBox.tsx
+++ b/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>
diff --git a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
index fae6e1c8b6..1ea15d7bf7 100644
--- a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
+++ b/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
diff --git a/frontend/src/hooks/api/getters/useFeatureSearch/useFeatureSearch.ts b/frontend/src/hooks/api/getters/useFeatureSearch/useFeatureSearch.ts
index 8fb6aa1cad..e22a702145 100644
--- a/frontend/src/hooks/api/getters/useFeatureSearch/useFeatureSearch.ts
+++ b/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 = (
-    offset: number,
-    limit: number,
-    projectId = '',
-    searchValue = '',
-    options: SWRConfiguration = {},
-): IUseFeatureSearchOutput => {
-    const { KEY, fetcher } = getFeatureSearchFetcher(
-        projectId,
-        offset,
-        limit,
-        searchValue,
-    );
-    const { data, error, mutate } = useSWR<IFeatureSearchResponse>(
-        KEY,
-        fetcher,
-        options,
-    );
+const createFeatureSearch = () => {
+    let total = 0;
+    let initialLoad = true;
 
-    const refetch = useCallback(() => {
-        mutate();
-    }, [mutate]);
+    return (
+        offset: number,
+        limit: number,
+        projectId = '',
+        searchValue = '',
+        options: SWRConfiguration = {},
+    ): IUseFeatureSearchOutput => {
+        const { KEY, fetcher } = getFeatureSearchFetcher(
+            projectId,
+            offset,
+            limit,
+            searchValue,
+        );
+        const { data, error, mutate, isLoading } =
+            useSWR<IFeatureSearchResponse>(KEY, fetcher, options);
 
-    const returnData = data || fallbackData;
-    return {
-        ...returnData,
-        loading: false,
-        error,
-        refetch,
+        const refetch = useCallback(() => {
+            mutate();
+        }, [mutate]);
+
+        if (data?.total) {
+            total = data.total;
+        }
+
+        if (!isLoading && initialLoad) {
+            initialLoad = false;
+        }
+
+        const returnData = data || fallbackData;
+        return {
+            ...returnData,
+            loading: isLoading,
+            error,
+            refetch,
+            total,
+            initialLoad: isLoading && initialLoad,
+        };
     };
 };
 
+export const useFeatureSearch = createFeatureSearch();
+
 const getFeatureSearchFetcher = (
     projectId: string,
     offset: number,
diff --git a/frontend/src/hooks/useLoading.ts b/frontend/src/hooks/useLoading.ts
index a0c207c2aa..194091bff3 100644
--- a/frontend/src/hooks/useLoading.ts
+++ b/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);
                 }
             });
         }
diff --git a/frontend/src/themes/app.css b/frontend/src/themes/app.css
index f353d22e22..6bfe9b5a98 100644
--- a/frontend/src/themes/app.css
+++ b/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;