Fix dashboard refresh button behaviour

frontend/javascripts/dashboard/dataset/dataset_cache_provider.js

@@ -23,6 +23,7 @@ type Options = {
 type Context = {
   datasets: Array<APIMaybeUnimportedDataset>,
   isLoading: boolean,
+  isChecking: boolean,
   checkDatasets: () => Promise<void>,
   fetchDatasets: (options?: Options) => Promise<void>,
   reloadDataset: (
@@ -54,6 +55,7 @@ export const datasetCache = {
 export const DatasetCacheContext = createContext<Context>({
   datasets: [],
   isLoading: false,
+  isChecking: false,
   fetchDatasets: async () => {},
   checkDatasets: async () => {},
   reloadDataset: async () => {},
@@ -63,6 +65,7 @@ export const DatasetCacheContext = createContext<Context>({
 export default function DatasetCacheProvider({ children }: { children: Node }) {
   const [datasets, setDatasets] = useState(datasetCache.get());
   const [isLoading, setIsLoading] = useState(false);
+  const [isChecking, setIsChecking] = useState(false);
   const [pendingDatasetUpdates, setPendingDatasetUpdates] = useState<{
     [string]: Promise<APIDataset>,
   }>({});
@@ -105,6 +108,7 @@ export default function DatasetCacheProvider({ children }: { children: Node }) {
     if (isLoading) return;
     try {
       setIsLoading(true);
+      setIsChecking(true);
       const datastores = await getDatastores();
       await Promise.all(
         datastores
@@ -117,10 +121,12 @@ export default function DatasetCacheProvider({ children }: { children: Node }) {
           ),
       );
       await fetchDatasets({ isCalledFromCheckDatasets: true });
+      setIsChecking(false);
     } catch (error) {
       handleGenericError(error);
     } finally {
       setIsLoading(false);
+      setIsChecking(false);
     }
   }
 
@@ -208,6 +214,7 @@ export default function DatasetCacheProvider({ children }: { children: Node }) {
       value={{
         datasets,
         isLoading,
+        isChecking,
         checkDatasets,
         fetchDatasets,
         reloadDataset,

frontend/javascripts/dashboard/dataset_view.js

@@ -341,13 +341,27 @@ function DatasetView(props: Props) {
     <div className="pull-right" style={{ display: "flex" }}>
       {isUserAdminOrDatasetManagerOrTeamManager ? (
         <React.Fragment>
-          <Button
-            icon={context.isLoading ? <LoadingOutlined /> : <ReloadOutlined />}
-            style={margin}
-            onClick={context.checkDatasets}
+          <Tooltip
+            title={
+              context.isChecking
+                ? "Refreshing the list of cached datasets."
+                : "Search for new datasets on disk."
+            }
           >
-            Refresh
-          </Button>
+            <Button
+              icon={
+                (context.datasets.length === 0 && context.isLoading) || context.isChecking ? (
+                  <LoadingOutlined />
+                ) : (
+                  <ReloadOutlined />
+                )
+              }
+              style={margin}
+              onClick={context.checkDatasets}
+            >
+              Refresh
+            </Button>
+          </Tooltip>
           <Link to="/datasets/upload" style={margin}>
             <Button type="primary" icon={<PlusOutlined />}>
               Add Dataset