Merge pull request #721 from jembi/fixes/ui-loading

fix: only show footer if there's data.
jembi · Dec 4, 2024 · 9367c83 · 9367c83
2 parents 6a47d3e + 5cba5de
commit 9367c83
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 23 deletions.
diff --git a/packages/header-app/src/components/openhim.appbar.component.tsx b/packages/header-app/src/components/openhim.appbar.component.tsx
@@ -17,14 +17,15 @@ import {Page, Role, UserProfile} from '../types'
 import {getApps, getUser, getUserPermissionRoles} from '../services/api'
 import {useAlert} from '../contexts/alert.context'
 import {OpenhimLogo} from './common/openhim.logo'
+import { SxProps, Theme } from '@mui/material'
 
 const DIVIDER_MENU_ITEM: Readonly<Page> = Object.freeze({
   name: '__',
   children: [],
   link: ''
 })
 
-const navbarTextStyle = {
+const navbarTextStyle: SxProps<Theme> = {
   fontSize: '14px',
   letterSpacing: '0.4px',
   lineHeight: '24px',

diff --git a/packages/transaction-log/src/components/common/app.main.component.tsx b/packages/transaction-log/src/components/common/app.main.component.tsx
@@ -34,7 +34,7 @@ import {useBasicBackdrop} from '../../contexts/backdrop.context'
 import Loader from '../helpers/loader.helper.component'
 import {useConfirmation} from '../../contexts/confirmation.context'
 import {BasePageTemplate} from '../../../../base-components'
-import { CircularProgress } from '@mui/material'
+import {CircularProgress} from '@mui/material'
 
 const App: React.FC = () => {
   const NO_FILTER = 'NoFilter'
@@ -610,7 +610,12 @@ const App: React.FC = () => {
         <Card elevation={4}>
           <CardContent>
             {filterLoading ? (
-              <Box display="flex" justifyContent="center" alignItems="center" p={3}>
+              <Box
+                display="flex"
+                justifyContent="center"
+                alignItems="center"
+                p={3}
+              >
                 <CircularProgress />
               </Box>
             ) : (

diff --git a/packages/transaction-log/src/components/common/transactionlog.datatable.component.tsx b/packages/transaction-log/src/components/common/transactionlog.datatable.component.tsx
@@ -316,27 +316,29 @@ const TransactionLogTable: React.FC<TransactionLogTableProps> = ({
                 </TableRow>
               )}
             </TableBody>
-            <TableFooter>
-              <TableRow sx={{borderBottom: 'none'}}>
-                <TableCell
-                  colSpan={11}
-                  align="right"
-                  sx={{borderBottom: 'none'}}
-                >
-                  <Button
-                    onClick={loadMore}
-                    endIcon={<ChevronRight />}
-                    disabled={loading}
+            {!(initialTransactionLoadComplete && transactions.length === 0) && (
+              <TableFooter>
+                <TableRow sx={{borderBottom: 'none'}}>
+                  <TableCell
+                    colSpan={11}
+                    align="right"
+                    sx={{borderBottom: 'none'}}
                   >
-                    {loading ? (
-                      <CircularProgress size={24} />
-                    ) : (
-                      'Load 20 more results'
-                    )}
-                  </Button>
-                </TableCell>
-              </TableRow>
-            </TableFooter>
+                    <Button
+                      onClick={loadMore}
+                      endIcon={<ChevronRight />}
+                      disabled={loading}
+                    >
+                      {loading ? (
+                        <CircularProgress size={24} />
+                      ) : (
+                        'Load 20 more results'
+                      )}
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              </TableFooter>
+            )}
           </Table>
         </TableContainer>
       </Box>