From 81034a10aed91daacd643d552d2b8578b6afc103 Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Mon, 1 Feb 2021 12:23:12 -0300
Subject: [PATCH] Added circular progress while its catching the data
---
src/Components/IframeOverlay/DrawerContent.js | 15 ++++++++++++---
1 file changed, 12 insertions(+), 3 deletions(-)
diff --git a/src/Components/IframeOverlay/DrawerContent.js b/src/Components/IframeOverlay/DrawerContent.js
index 8bd7e483..cd4772a6 100644
--- a/src/Components/IframeOverlay/DrawerContent.js
+++ b/src/Components/IframeOverlay/DrawerContent.js
@@ -6,15 +6,19 @@ import SearchInput from './SearchInput.js';
import ResourceCard from './ResourceCard.js';
import { apiUrl } from '../../env';
import SmallFooter from './SmallFooter.js';
+import CircularProgress from '@material-ui/core/CircularProgress';
export default function DrawerContent(props) {
const [resources, setResources] = useState([]);
+ const [isLoading, setIsLoading] = useState(false);
const search = (query) => {
+ setIsLoading(true);
axios.get(`${apiUrl}/search?
- page=0&results_per_page=5&query=${query}&search_class=LearningObject`)
+ page=0&results_per_page=12&query=${query}&search_class=LearningObject`)
.then(res => {
setResources(res.data);
+ setIsLoading(false);
});
}
@@ -40,13 +44,18 @@ export default function DrawerContent(props) {
Recursos Relacionados na Plataforma MEC:
</Description>
</Grid>
- {resources.map(r => {
+
+ {
+ isLoading ? <CircularProgress style={{color : 'white'}}/>
+ :
+ resources.map((r, index) => {
return(
- <Grid item xs={11}>
+ <Grid item xs={11} key={index}>
<ResourceCard
id={r.id}
name={r.name}
likes={r.likes_count}
+ thumb={r.thumbnail}
/>
</Grid>
);}
--
GitLab