From 0f7360c1e823e4e3168149cff63cb9ede94c2e7c Mon Sep 17 00:00:00 2001
From: Fredrik Oseberg <fredrik.no@gmail.com>
Date: Mon, 13 Nov 2023 14:47:51 +0100
Subject: [PATCH] fix: conditionally show pagination bar

---
 .../common/PageContent/PageContent.tsx        |  2 +-
 .../PaginatedProjectFeatureToggles.tsx        | 25 +++++++++++++++----
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/common/PageContent/PageContent.tsx b/frontend/src/component/common/PageContent/PageContent.tsx
index 4755bff0ce4d..7eb394b95384 100644
--- a/frontend/src/component/common/PageContent/PageContent.tsx
+++ b/frontend/src/component/common/PageContent/PageContent.tsx
@@ -109,7 +109,7 @@ export const PageContent: FC<IPageContentProps> = ({
     );
 
     if (disableLoading) {
-        return content;
+        return <div>{content}</div>;
     }
 
     return (
diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx
index d49c0cf905de..af2c37ad4c41 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx
@@ -501,14 +501,23 @@ export const PaginatedProjectFeatureToggles = ({
         isFavoritesPinned,
     ]);
 
+    const showPaginationBar = Boolean(total && total > 25);
+    const style = showPaginationBar
+        ? { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }
+        : {};
+
     return (
         <>
             <PageContent
                 disableLoading
                 className={styles.container}
-                sx={{ borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }}
+                sx={style}
                 header={
-                    <div ref={headerLoadingRef}>
+                    <div
+                        ref={headerLoadingRef}
+                        aria-busy={initialLoad}
+                        aria-live='polite'
+                    >
                         <PageHeader
                             titleElement={
                                 showTitle
@@ -615,7 +624,11 @@ export const PaginatedProjectFeatureToggles = ({
                     </div>
                 }
             >
-                <div ref={bodyLoadingRef}>
+                <div
+                    ref={bodyLoadingRef}
+                    aria-busy={loading}
+                    aria-live='polite'
+                >
                     <SearchHighlightProvider value={getSearchText(searchValue)}>
                         <VirtualizedTable
                             rows={rows}
@@ -692,8 +705,10 @@ export const PaginatedProjectFeatureToggles = ({
                     {featureToggleModals}
                 </div>
             </PageContent>
-
-            {paginationBar}
+            <ConditionallyRender
+                condition={showPaginationBar}
+                show={paginationBar}
+            />
             <BatchSelectionActionsBar
                 count={Object.keys(selectedRowIds).length}
             >