Added loading animation for search

openml · Jan 8, 2024 · b8ab08f · b8ab08f
1 parent 5705779
commit b8ab08f
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/app/src/components/Loader.js b/app/src/components/Loader.js
@@ -1,20 +1,17 @@
 import React from "react";
 import styled from "@emotion/styled";
-import { CircularProgress } from "@mui/material";
+import { LinearProgress } from "@mui/material";
 
 const Root = styled.div`
   justify-content: center;
   align-items: center;
   display: flex;
-  min-height: 100%;
 `;
 
-function Loader() {
+export default function Loader() {
   return (
     <Root>
-      <CircularProgress color="secondary" />
+      <LinearProgress />
     </Root>
   );
 }
-
-export default Loader;
diff --git a/app/src/components/search/SearchContainer.js b/app/src/components/search/SearchContainer.js
@@ -12,6 +12,7 @@ import {
   Tab,
   Tabs,
   Card,
+  LinearProgress,
 } from "@mui/material";
 
 import { TabContext, TabPanel } from "@mui/lab";
@@ -206,6 +207,9 @@ const SearchContainer = memo(
 
     return (
       <SearchProvider config={config}>
+        <WithSearch mapContextToProps={({ isLoading }) => ({ isLoading })}>
+          {({ isLoading }) => (isLoading ? <LinearProgress /> : null)}
+        </WithSearch>
         {false && <TagFilter />}
         <TabContext value={filter}>
           <FilterBox xs={12} variant="outlined">