Merge pull request #17 from WillSams/style/further-tweak-styles

Add loading component

Author: WillSams

frontend/public/css/application.css

@@ -35,12 +35,12 @@ const HomeComponent = ({
         <Tab.Container defaultActiveKey="reservations">
           <Row className="nav nav-tabs ml-4">
             <Nav className="bg-dark">
-              <Col lg={7}>
+              <Col lg={6}>
                 <Nav.Item>
                   <Nav.Link eventKey="reservations">Reservations</Nav.Link>
                 </Nav.Item>
               </Col>
-              <Col lg={5}>
+              <Col lg={6}>
                 <Nav.Item>
                   <Nav.Link eventKey="about">About</Nav.Link>
                 </Nav.Item>

frontend/public/img/loading.gif

@@ -1,20 +1,28 @@
 import React from 'react';
 import { Button } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 
 import { default as utils } from '@/shared/utils';
+import { Loading } from '@/shared/components';
 
 const DefaultTab = ({
   reservations = [],
   actions = { cancelReservation: () => {} },
 }) => {
   const { cancelReservation } = actions;
+  const loading = useSelector((state) => state?.site?.home?.loading);
+
   return (
     <div data-name="reservations-tab">
       <div className="col-lg-12 bg-dark mx-auto">
         <h3>Reservations</h3>
         <div className="container flex-column">
-          {reservations.length > 0 ? (
+          {loading && reservations.length === 0 && <Loading />}
+          {!loading && reservations.length === 0 && (
+            <div>No reservations exist.</div>
+          )}
+          {reservations.length > 0 && (
             <table className="table bg-light">
               <thead>
                 <tr>
@@ -65,8 +73,6 @@ const DefaultTab = ({
                 ))}
               </tbody>
             </table>
-          ) : (
-            <div>No reservations exist.</div>
           )}
         </div>
       </div>

frontend/public/js/jquery-3.7.1.slim.min.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Image } from 'react-bootstrap';
+
+const Loading = ({ width = 99, height = 99 }) => {
+  return <Image width={width} height={height} src="/img/loading.gif" />;
+};
+
+export default Loading;

frontend/src/screens/home/index.jsx

@@ -2,3 +2,4 @@ export { default as AlertModal } from './AlertModal';
 export { default as App } from './App';
 export { default as ConfirmationModal } from './ConfirmationModal';
 export { default as InvalidRoute } from './InvalidRoute';
+export { default as Loading } from './Loading';