Add simple loading and default state to datasourcewrapper (#1815)

platform/ui/src/components/EmptyStudies/EmptyStudies.js

@@ -3,12 +3,13 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Icon, Typography } from '@ohif/ui';
 
-const EmptyStudies = ({ className }) => {
+// TODO: Add loading spinner to OHIF + use it here.
+const EmptyStudies = ({ className, isLoading }) => {
   return (
     <div className={classnames('flex-col inline-flex items-center', className)}>
       <Icon name="magnifier" className="mb-4" />
       <Typography className="text-primary-light" variant="h5">
-        No studies available
+        {!isLoading ? 'No studies available' : 'Loading...'}
       </Typography>
     </div>
   );

platform/viewer/src/routes/DataSourceWrapper.jsx

@@ -46,14 +46,17 @@ function DataSourceWrapper(props) {
   // studies.processResults --> <LayoutTemplate studies={} />
   // But only for LayoutTemplate type of 'list'?
   // Or no data fetching here, and just hand down my source
-  const [data, setData] = useState();
+  const [data, setData] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
   useEffect(() => {
     // 204: no content
     async function getData() {
+      setIsLoading(true);
       const searchResults = await dataSource.query.studies.search(
         queryFilterValues
       );
       setData(searchResults);
+      setIsLoading(false);
     }
 
     try {
@@ -61,23 +64,19 @@ function DataSourceWrapper(props) {
     } catch (ex) {
       console.warn(ex);
     }
-    console.log('DataSourceWrapper: useEffect');
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [history.location.search]);
   // queryFilterValues
 
   // TODO: Better way to pass DataSource?
   return (
-    <React.Fragment>
-      {data && (
     <LayoutTemplate
       {...rest}
       history={history}
       data={data}
       dataSource={dataSource}
+      isLoadingData={isLoading}
     />
-      )}
-    </React.Fragment>
   );
 }
 

platform/viewer/src/routes/WorkList/WorkList.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { Suspense, useState, useEffect } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
@@ -28,15 +28,13 @@ const seriesInStudiesMap = new Map();
  * TODO:
  * - debounce `setFilterValues` (150ms?)
  */
-function WorkList({ history, data: studies, dataSource }) {
+function WorkList({ history, data: studies, isLoadingData, dataSource }) {
   // ~ Modes
   const [appConfig] = useAppConfig();
   // ~ Filters
   const query = useQuery();
   const queryFilterValues = _getQueryFilterValues(query);
-  const [filterValues, _setFilterValues] = useState(
-    Object.assign({}, defaultFilterValues, queryFilterValues)
-  );
+  const [filterValues, _setFilterValues] = useState({ ...defaultFilterValues, ...queryFilterValues });
   const debouncedFilterValues = useDebounce(filterValues, 200);
   const { resultsPerPage, pageNumber, sortBy, sortDirection } = filterValues;
 
@@ -80,6 +78,7 @@ function WorkList({ history, data: studies, dataSource }) {
 
       return 0;
     });
+
   // ~ Rows & Studies
   const [expandedRows, setExpandedRows] = useState([]);
   const [studiesWithSeriesData, setStudiesWithSeriesData] = useState([]);
@@ -190,6 +189,7 @@ function WorkList({ history, data: studies, dataSource }) {
       return filterValues[name] !== defaultFilterValues[name];
     });
   };
+
   const tableDataSource = sortedStudies.map((study, key) => {
     const rowKey = key + 1;
     const isExpanded = expandedRows.some(k => k === rowKey);
@@ -404,7 +404,7 @@ function WorkList({ history, data: studies, dataSource }) {
         </>
       ) : (
           <div className="flex flex-col items-center justify-center pt-48">
-          <EmptyStudies />
+            <EmptyStudies isLoading={isLoadingData} />
           </div>
         )}
     </div>