feat: add loading indicator and info when no items

DataBiosphere · Oct 2, 2023 · 9fd13af · 9fd13af
1 parent 5142da3
commit 9fd13af
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/src/components/data_search/DatasetSearchTable.js b/src/components/data_search/DatasetSearchTable.js
@@ -188,13 +188,23 @@ export const DatasetSearchTable = (props) => {
           <DatasetFilterList datasets={datasets} filters={filters} filterHandler={filterHandler} />
         </Box>
         <Box sx={{ width: '85%', padding: '0 1em' }}>
-          <CollapsibleTable data={tableData} selected={selected} selectHandler={selectHandler} summary='faceted study search table' />
+          {
+            isEmpty(datasets) ?
+              <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
+                <h1>No datasets registered for this library.</h1>
+              </Box>
+              :
+              <CollapsibleTable data={tableData} selected={selected} selectHandler={selectHandler} summary='faceted study search table' />
+          }
         </Box>
       </Box>
       <Box sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', padding: '2em 4em' }}>
-        <Button variant="contained" onClick={applyForAccess} sx={{ transform: 'scale(1.5)' }} >
+        {
+          !isEmpty(datasets) &&
+          <Button variant="contained" onClick={applyForAccess} sx={{ transform: 'scale(1.5)' }} >
             Apply for Access
-        </Button>
+          </Button>
+        }
       </Box>
     </Box>
   );

diff --git a/src/pages/DatasetSearch.js b/src/pages/DatasetSearch.js
@@ -8,6 +8,8 @@ import duosIcon from '../images/duos-network-logo.svg';
 import mgbIcon from '../images/mass-general-brigham-logo.svg';
 import elwaziIcon from '../images/elwazi-logo-color.svg';
 import { Storage } from '../libs/storage';
+import { isEmpty, isNil } from 'lodash';
+import { Box, CircularProgress } from '@mui/material';
 
 const signingOfficialQuery = (user) => {
   return {
@@ -51,6 +53,7 @@ const myInstitutionQuery = (user) => {
 export const DatasetSearch = (props) => {
   const { location } = props;
   const [datasets, setDatasets] = useState([]);
+  const [loading, setLoading] = useState(true);
   const user = Storage.getCurrentUser();
 
   // branded study table versions
@@ -143,6 +146,7 @@ export const DatasetSearch = (props) => {
       try {
         await DataSet.searchDatasetIndex(query).then((datasets) => {
           setDatasets(datasets);
+          setLoading(false);
         });
       } catch (error) {
         Notifications.showError({ text: 'Failed to load Elasticsearch index' });
@@ -152,7 +156,12 @@ export const DatasetSearch = (props) => {
   }, []);
 
   return (
-    <DatasetSearchTable {...props} datasets={datasets} icon={version.icon} title={version.title} />
+    loading ?
+      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
+        <CircularProgress />
+      </Box>
+      :
+      <DatasetSearchTable {...props} datasets={datasets} icon={version.icon} title={version.title} />
   );
 };