Added circular progress while its catching the data

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>
 				);}