Revert "Use skeleton loaders"

This reverts commit ae7a02b.

webapp/package.json

@@ -5,7 +5,6 @@
   "dependencies": {
     "@material-ui/core": "^4.9.8",
     "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "^4.0.0-alpha.51",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-redux": "^7.2.0",

webapp/src/ui/components/courses-list.js

@@ -1,4 +1,4 @@
-import React, {useState, useEffect, useCallback} from 'react';
+import React, {useState, useEffect} from 'react';
 import {
   TableContainer,
   Paper,
@@ -9,7 +9,6 @@ import {
   TableHead,
   TablePagination
 } from '@material-ui/core';
-import Skeleton from '@material-ui/lab/Skeleton';
 
 const columns = [
   {id: 'course_name', label: 'Course Name'},
@@ -20,19 +19,14 @@ const columns = [
   {id: 'transfer_college', label: 'College'}
 ];
 
-const CoursesList = ({data, loading}) => {
+const CoursesList = ({data}) => {
+  const [displayedData, setDisplayedData] = useState(data);
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(50);
 
-  const getPromisedData = useCallback(() => {
-    return loading ? [...new Array(rowsPerPage).keys()] : data;
-  }, [loading, rowsPerPage, data]);
-
-  const [displayedData, setDisplayedData] = useState(getPromisedData());
-
   useEffect(() => {
-    setDisplayedData(getPromisedData().slice(rowsPerPage * page, rowsPerPage * (page + 1)));
-  }, [rowsPerPage, page, getPromisedData]);
+    setDisplayedData(data.slice(rowsPerPage * page, rowsPerPage * (page + 1)));
+  }, [rowsPerPage, page, data]);
 
   return (
     <Paper>
@@ -52,12 +46,12 @@ const CoursesList = ({data, loading}) => {
           <TableBody>
             {displayedData.map(row => (
               <TableRow key={row.id} hover>
-                <TableCell>{loading ? <Skeleton/> : <span>{row.course_name}</span>}</TableCell>
-                <TableCell>{loading ? <Skeleton/> : <span>{row.course_subject}</span>}</TableCell>
-                <TableCell>{loading ? <Skeleton/> : <span>{row.course_id}</span>}</TableCell>
-                <TableCell>{loading ? <Skeleton/> : <span>{row.course_credits}</span>}</TableCell>
-                <TableCell>{loading ? <Skeleton/> : <span>{row.transfer_state}</span>}</TableCell>
-                <TableCell>{loading ? <Skeleton/> : <span>{row.transfer_college}</span>}</TableCell>
+                <TableCell>{row.course_name}</TableCell>
+                <TableCell>{row.course_subject}</TableCell>
+                <TableCell>{row.course_id}</TableCell>
+                <TableCell>{row.course_credits}</TableCell>
+                <TableCell>{row.transfer_state}</TableCell>
+                <TableCell>{row.transfer_college}</TableCell>
               </TableRow>
             ))}
           </TableBody>

webapp/src/ui/courses.js

@@ -1,17 +1,21 @@
 import React, {useState, useEffect} from 'react';
-import {InputBase, CircularProgress, Paper, Box, InputAdornment} from '@material-ui/core';
+import {makeStyles} from '@material-ui/core/styles';
+import {InputBase, Backdrop, CircularProgress, Paper, Box, InputAdornment} from '@material-ui/core';
 import SearchIcon from '@material-ui/icons/Search';
-import Skeleton from '@material-ui/lab/Skeleton';
+import ErrorIcon from '@material-ui/icons/Error';
 import {useDebounce} from 'use-debounce';
 import CoursesList from './components/courses-list';
 import {useDispatch, useSelector} from 'react-redux';
 import {getCourses} from '../actions';
-import useFocus from '../utils/use-focus';
+
+const useStyles = makeStyles(() => ({
+  backdrop: {
+    zIndex: 1000
+  }
+}));
 
 const Courses = () => {
   const dispatch = useDispatch();
-  // Const queryRef = useRef(null);
-  const [queryRef, setQueryFocus] = useFocus();
 
   // Update courses on load
   useEffect(() => {
@@ -50,20 +54,14 @@ const Courses = () => {
     setIsFiltering(true);
   };
 
-  // Focus query input after loading is finished
-  useEffect(() => {
-    if (courses.loading === false) {
-      setQueryFocus();
-    }
-  }, [courses, setQueryFocus]);
+  const classes = useStyles();
 
   return (
     <div>
       <Paper>
         <Box p={2}>
           <InputBase
-            fullWidth
-            inputRef={queryRef} disabled={courses.loading}
+            fullWidth autoFocus
             startAdornment={
               <InputAdornment position="start">
                 <SearchIcon/>
@@ -81,14 +79,24 @@ const Courses = () => {
       </Paper>
 
       <Box mt={2} mb={2}>
-        {courses.loading ? (
-          <Skeleton/>
-        ) : (
-          <span>Matched {filteredCourses.length} out of {courses.total ? courses.total : 0} results</span>
-        )}
+        Matched {filteredCourses.length} out of {courses.total ? courses.total : 0} results
       </Box>
 
-      <CoursesList data={filteredCourses} loading={courses.loading}/>
+      <CoursesList data={filteredCourses}/>
+
+      <Backdrop open={courses.loading || courses.error} className={classes.backdrop}>
+        {courses.error ? (
+          <Paper>
+            <Box p={4} textAlign="center">
+              <ErrorIcon style={{fontSize: 40}} color="inherit"/>
+
+              <p>Oops, something weird happened. The network request failed.</p>
+            </Box>
+          </Paper>
+        ) : (
+          <CircularProgress color="inherit"/>
+        )}
+      </Backdrop>
     </div>
   );
 };