Adds a loading animation

api/lighthouse-report.js

@@ -11,6 +11,14 @@ exports.handler = function(event, context, callback) {
   }
 
   const apiKey = process.env.GOOGLE_CLOUD_API_KEY;
+
+  if (!apiKey) {
+    callback(null, {
+      statusCode: 500,
+      body: JSON.stringify({ error: 'API key (GOOGLE_CLOUD_API_KEY) not set'}),
+    });
+  }
+
   const endpoint = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${encodeURIComponent(url)}&category=PERFORMANCE&category=ACCESSIBILITY&category=BEST_PRACTICES&category=SEO&category=PWA&strategy=mobile&key=${apiKey}`;
   
   axios.get(endpoint)

src/components/misc/Loader.tsx

@@ -0,0 +1,93 @@
+import styled from 'styled-components';
+
+import { StyledCard } from 'components/Form/Card';
+import Heading from 'components/Form/Heading';
+import colors from 'styles/colors';
+
+const LoaderContainer = styled(StyledCard)`
+  margin: 0 auto 1rem auto;
+  width: 95vw;
+  position: relative;
+  transition: all 0.2s ease-in-out;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 2rem;
+  height: 50vh;
+  transition: all 0.3s ease-in-out;
+  &.flex {
+    display: flex;
+  }
+  &.finished {
+    height: 0;
+    overflow: hidden;
+    opacity: 0;
+    margin: 0;
+    padding: 0;
+    svg { width: 0; }
+    h4 { font-size: 0; }
+  }
+  &.hide {
+    display: none;
+  }
+`;
+
+const StyledSvg = styled.svg`
+  width: 200px;
+  margin: 0 auto;
+  path {
+    fill: ${colors.primary};
+    &:nth-child(2) { opacity: 0.8; }
+    &:nth-child(3) { opacity: 0.5; }
+  }
+`;
+
+const Loader = (props: { show: boolean }): JSX.Element => {
+  return (
+  <LoaderContainer className={props.show ? '' : 'finished'}>
+    <Heading as="h4" color={colors.primary}>Fetching data...</Heading>
+    <StyledSvg version="1.1" id="L7" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+      viewBox="0 0 100 100" enableBackground="new 0 0 100 100">
+      <path fill="#fff" d="M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3
+        c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z">
+          <animateTransform 
+            attributeName="transform" 
+            attributeType="XML" 
+            type="rotate"
+            dur="2s" 
+            from="0 50 50"
+            to="360 50 50" 
+            repeatCount="indefinite" />
+      </path>
+    <path fill="#fff" d="M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7
+      c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z">
+          <animateTransform 
+            attributeName="transform" 
+            attributeType="XML" 
+            type="rotate"
+            dur="1s" 
+            from="0 50 50"
+            to="-360 50 50" 
+            repeatCount="indefinite" />
+      </path>
+    <path fill="#fff" d="M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5
+      L82,35.7z">
+          <animateTransform 
+            attributeName="transform" 
+            attributeType="XML" 
+            type="rotate"
+            dur="2s" 
+            from="0 50 50"
+            to="360 50 50" 
+            repeatCount="indefinite" />
+      </path>
+    </StyledSvg>
+  </LoaderContainer>
+  );
+}
+
+export default Loader;
+
+
+

src/pages/Results.tsx

@@ -13,6 +13,7 @@ import { RowProps }  from 'components/Form/Row';
 import ErrorBoundary from 'components/misc/ErrorBoundary';
 import docs from 'utils/docs';
 
+import Loader from 'components/misc/Loader';
 
 import ServerLocationCard from 'components/Results/ServerLocation';
 import ServerInfoCard from 'components/Results/ServerInfo';
@@ -102,8 +103,7 @@ const Results = (): JSX.Element => {
   const [ addressType, setAddressType ] = useState<AddressType>('empt');
   const { address } = useParams();
 
-  const [ loadingJobs, setLoadingJobs ] = useState<LoadingJob[]>(initialJobs);
-
+  const [loadingJobs, setLoadingJobs] = useState<LoadingJob[]>(initialJobs);
   const [modalOpen, setModalOpen] = useState(false);
   const [modalContent, setModalContent] = useState<ReactNode>(<></>);
 
@@ -496,6 +496,7 @@ const Results = (): JSX.Element => {
       </Nav>
       <ProgressBar loadStatus={loadingJobs} showModal={showErrorModal} showJobDocs={showInfo} />
       { address?.includes(window?.location?.hostname || 'web-check.as93.net') && <SelfScanMsg />}
+      <Loader show={loadingJobs.filter((job: LoadingJob) => job.state !== 'loading').length < 5} />
       <ResultsContent>
         
       <Masonry