Merge pull request #1706 from Skydodle/1676-update-loading-modals

1676 Update loading modals to new design

components/Loading/AcknowledgeModal.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import {
+  styled, Box, Modal, Typography, Link, Button,
+} from '@mui/material';
+import colors from '@theme/colors';
+
+const StyledModal = styled(Modal)({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+const StyledBox = styled(Box)(({ theme }) => ({
+  position: 'absolute',
+  backgroundColor: '#29404F',
+  padding: theme.spacing(4),
+  boxShadow: theme.shadows[5],
+  textAlign: 'center',
+  maxWidth: '464px',
+  borderRadius: '10px',
+  outline: 'none',
+}));
+
+const ExternalLink = styled(Link)({
+  color: colors.primaryFocus,
+  textDecoration: 'none',
+  '&:hover': {
+    textDecoration: 'underline',
+  },
+});
+
+const buttonStyle = {
+  width: '104px',
+  height: '29px',
+  borderRadius: '5px',
+  backgroundColor: '#ECECEC',
+  border: '1px solid #ECECEC',
+  '&:hover': {
+    backgroundColor: '#DADADA',
+    borderColor: '#DADADA',
+  },
+  color: '#29404F',
+  fontWeight: '500',
+};
+
+function AcknowledgeModal() {
+  const [open, setOpen] = React.useState(true);
+  const handleClose = () => {
+    setOpen(false);
+  };
+  return (
+    <StyledModal open={open}>
+      <StyledBox>
+        <Typography variant="h6" sx={{ fontWeight: 500 }} gutterBottom>
+          Welcome to 311Data
+        </Typography>
+        <Typography variant="body2" sx={{ fontWieght: 400, textAlign: 'start' }} gutterBottom>
+          311-data.org is 100% powered by volunteers from Hack
+          <br />
+          for LA and is not affiliated with the city of Los Angeles.
+          <br />
+          For official information about 311 services in Los
+          <br />
+          Angeles, please visit
+          {' '}
+          <ExternalLink href="https://lacity.gov/myla311" target="_blank" rel="noopener noreferrer" aria-label="Visit MyLA311 for official information (opens in a new tab)">
+            MyLA311
+          </ExternalLink>
+          .
+        </Typography>
+        <Box sx={{ pt: 3 }}>
+          <Button onClick={handleClose} sx={buttonStyle}>Ok</Button>
+        </Box>
+      </StyledBox>
+    </StyledModal>
+  );
+}
+
+export default AcknowledgeModal;

components/Loading/FunFactCard.jsx

@@ -0,0 +1,48 @@
+import React, { useState, useEffect } from 'react';
+import { styled } from '@mui/material/styles';
+import { Card, Box, Typography } from '@mui/material';
+import { seconds } from '@utils';
+import facts from '@data/facts';
+
+const StyledCard = styled(Card)({
+  display: 'flex',
+  alignItems: 'flex',
+  justifyContent: 'center',
+});
+
+const StyledBox = styled(Box)(({ theme }) => ({
+  position: 'absolute',
+  bottom: '12vh',
+  backgroundColor: '#424242',
+  padding: theme.spacing(3, 3, 3),
+  boxShadow: theme.shadows[5],
+  textAlign: 'center',
+  maxWidth: '533px',
+  width: 'auto',
+  borderRadius: '10px',
+  zIndex: 50000, // This prevents from being overlay by LoadingModal's backdrop
+}));
+
+export default function FunFactCard() {
+  const [currentFactIndex, setCurrentFactIndex] = useState(0);
+  const factsLength = facts.length;
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCurrentFactIndex(prevIndex => (prevIndex + 1) % factsLength);
+    }, seconds(5));
+    return () => clearInterval(intervalId);
+  }, [factsLength]);
+
+  return (
+    <StyledCard>
+      <StyledBox>
+        <Typography variant="body1" sx={{ fontSize: '14px' }}>
+          Did you know?
+          {' '}
+          {facts[currentFactIndex]}
+        </Typography>
+      </StyledBox>
+    </StyledCard>
+  );
+}

components/Loading/LoadingModal.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { keyframes } from '@mui/system';
+import { styled } from '@mui/material/styles';
+import {
+  Box, Modal, Typography, Link,
+} from '@mui/material';
+import fonts from '@theme/fonts';
+import LoadingModal311Logo from '@assets/311Logo.png';
+import HFLALogo from '@assets/hack_for_la_logo.png';
+import spinner from '@assets/spinner.png';
+import colors from '@theme/colors';
+
+const StyledModal = styled(Modal)({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+const StyledBox = styled(Box)(({ theme }) => ({
+  position: 'absolute',
+  bottom: '35vh',
+  backgroundColor: '#29404F',
+  padding: theme.spacing(4),
+  boxShadow: theme.shadows[5],
+  textAlign: 'center',
+  maxWidth: '533px',
+  maxHeight: '469px',
+  borderRadius: '20px',
+  outline: 'none',
+}));
+
+const StyledTypography = styled(Typography)({
+  fontSize: '16px',
+  fontFamily: fonts.family.roboto,
+  fontWeight: fonts.weight.medium,
+});
+
+const ExternalLink = styled(Link)({
+  color: colors.primaryFocus,
+  textDecoration: 'none',
+  '&:hover': {
+    textDecoration: 'underline',
+  },
+});
+
+// Loading png spinner animation
+const spin = keyframes`
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+`;
+
+const StyledSpinner = styled('img')({
+  animation: `${spin} 2s linear infinite`,
+  width: '36px',
+  display: 'block',
+  margin: '10px auto',
+});
+
+export default function LoadingModal() {
+  return (
+    <StyledModal open>
+      <StyledBox>
+        <Box sx={{ marginBottom: '20px' }}>
+          <img src={LoadingModal311Logo} width="245" height="160" alt="311 data logo" />
+          <StyledSpinner src={spinner} alt="Loading..." />
+        </Box>
+        <StyledTypography variant="body1">
+          Loading data points and map. Please give us a moment.
+          <br />
+          For official information about 311 services in Los Angeles,
+          <br />
+          please visit
+          {' '}
+          <ExternalLink href="https://lacity.gov/myla311" target="_blank" rel="noopener noreferrer" aria-label="Visit MyLA311 for official information (opens in a new tab)">
+            MyLA311
+          </ExternalLink>
+          .
+        </StyledTypography>
+        <Box sx={{
+          display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: '15px',
+        }}
+        >
+          <Typography sx={{ fontSize: '14px', fontFamily: fonts.family.roboto, fontWeight: fonts.weight.medium }}>
+            Powered by Volunteers at Hack for LA
+          </Typography>
+          <img src={HFLALogo} alt="Hack For LA logo" width="40" />
+        </Box>
+      </StyledBox>
+    </StyledModal>
+  );
+}

components/Map/index.js

@@ -20,13 +20,14 @@ import { updateMapPosition } from '@reducers/ui';
 import { trackMapExport } from '@reducers/analytics';
 import { INTERNAL_DATE_SPEC } from '../common/CONSTANTS';
 import { getTypeIdFromTypeName } from '@utils';
-import FactModal from '@components/FactModal';
+import LoadingModal from '../Loading/LoadingModal';
+import FunFactCard from '@components/Loading/FunFactCard';
 import CookieNotice from '../main/CookieNotice';
 import Map from './Map';
 import moment from 'moment';
-import gif from '@assets/loading.gif';
 import ddbh from '@utils/duckDbHelpers.js';
 import DbContext from '@db/DbContext';
+import AcknowledgeModal from '../Loading/AcknowledgeModal';
 
 // We make API requests on a per-day basis. On average, there are about 4k
 // requests per day, so 10k is a large safety margin.
@@ -394,18 +395,13 @@ class MapContainer extends React.Component {
           initialState={this.initialState}
         />
         <CookieNotice />
-        {(isDbLoading || isMapLoading) && (
+        {(isDbLoading || isMapLoading) ? (
           <>
-            <FactModal />
-            <img
-              style={{
-                width: window.innerWidth,
-                height: 16,
-                position: 'absolute',
-              }}
-              src={gif}
-            />
+            <LoadingModal />
+            <FunFactCard />
           </>
+        ) : (
+          <AcknowledgeModal/>
         )}
       </div>
     );