From 0bcb86c2b900c149ddec9ec3276197e248734918 Mon Sep 17 00:00:00 2001
From: nofurtherinformation <dhalpern@uchicago.edu>
Date: Mon, 5 Aug 2024 10:49:25 -0500
Subject: [PATCH] refactor spinner and cleanup

---
 components/MapTooltip/MapTooltip.tsx          | 14 ++------
 components/MapTooltip/Spinner.css             | 32 -------------------
 components/Nav/Interactive.tsx                | 15 +++++----
 .../ReportLoadingShade/ReportLoadingShade.tsx | 21 ++++++++++++
 components/ReportLoadingShade/index.ts        |  5 +++
 5 files changed, 37 insertions(+), 50 deletions(-)
 delete mode 100644 components/MapTooltip/Spinner.css
 create mode 100644 components/ReportLoadingShade/ReportLoadingShade.tsx
 create mode 100644 components/ReportLoadingShade/index.ts

diff --git a/components/MapTooltip/MapTooltip.tsx b/components/MapTooltip/MapTooltip.tsx
index a1ba126..79e6854 100644
--- a/components/MapTooltip/MapTooltip.tsx
+++ b/components/MapTooltip/MapTooltip.tsx
@@ -6,7 +6,7 @@ import { MapState } from "utils/state/types"
 import { TooltipSectionsRenderer } from "./MapTooltipSections"
 import { MapTooltipProps } from "./types"
 import { adjustTooltipToMousePosition } from "./utils"
-import "./Spinner.css"
+import Spinner from "components/Spinner"
 
 export const MapTooltipInner: React.FC<
   MapTooltipProps & { tooltipStatus: MapState["tooltipStatus"]; tooltip: MapState["tooltip"] }
@@ -24,16 +24,8 @@ export const MapTooltipInner: React.FC<
     }
   })
 
-  if (!data) {
-    return (
-      <svg className="spinner" width="2rem" height="2rem" viewBox="0 0 50 50">
-        <circle className="path" cx="25" cy="25" r="20" fill="none" strokeWidth="4" />
-      </svg>
-    )
-  }
-  if (simpleMap) {
-    return <p className="pb-2">{id}</p>
-  }
+  if (!data) return <Spinner />
+  if (simpleMap) return <p className="pb-2">{id}</p>
 
   if (tooltipData) {
     return (
diff --git a/components/MapTooltip/Spinner.css b/components/MapTooltip/Spinner.css
deleted file mode 100644
index 18358a5..0000000
--- a/components/MapTooltip/Spinner.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.spinner {
-  animation: rotate 2s linear infinite;
-  width: 50px;
-  height: 50px;
-}
-
-.path {
-  stroke: #5652bf;
-  stroke-linecap: round;
-  animation: dash 1.5s ease-in-out infinite;
-}
-
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes dash {
-  0% {
-    stroke-dasharray: 1, 150;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -35;
-  }
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -124;
-  }
-}
diff --git a/components/Nav/Interactive.tsx b/components/Nav/Interactive.tsx
index 4703828..d7e7dee 100644
--- a/components/Nav/Interactive.tsx
+++ b/components/Nav/Interactive.tsx
@@ -3,6 +3,7 @@ import React, { useState } from "react"
 import { HiMenu, HiX } from "react-icons/hi"
 import { SubNavList } from "./SubNavList"
 import { NavProps } from "./types"
+import Link from "next/link"
 
 export const InteractiveNav: React.FC<NavProps> = ({ navInfo }) => {
   const links = navInfo.data.nav.links
@@ -16,9 +17,9 @@ export const InteractiveNav: React.FC<NavProps> = ({ navInfo }) => {
   return (
     <nav className="flex w-full flex-row justify-between bg-white/85 p-4 text-neutral-950 shadow-md" id="top-nav">
       <div className="prose m-0 p-0 font-display">
-        <a href="/" className="line-height-0 m-0 p-0 no-underline">
+        <Link href="/" className="line-height-0 m-0 p-0 no-underline">
           <h1 className="m-0 p-0">{navInfo.data.nav.title}</h1>
-        </a>
+        </Link>
       </div>
       <ul className="hidden items-center justify-end md:flex">
         {links.map((link, li) => {
@@ -31,7 +32,7 @@ export const InteractiveNav: React.FC<NavProps> = ({ navInfo }) => {
           } else {
             return (
               <li className="mr-4" key={li}>
-                <a href={link.path}>{link.title}</a>
+                <Link href={link.path}>{link.title}</Link>
               </li>
             )
           }
@@ -51,16 +52,16 @@ export const InteractiveNav: React.FC<NavProps> = ({ navInfo }) => {
             {links.map((link, idx) => (
               <div key={idx}>
                 {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                <a href={link.sublinks?.length ? "" : link.path} className="block py-2 text-2xl">
+                <Link href={link.sublinks?.length ? "" : link.path} className="block py-2 text-2xl">
                   {link.title}
-                </a>
+                </Link>
                 {!!link.sublinks?.length && (
                   <ul className="list-disc pl-6">
                     {link.sublinks.map((sublink, subIdx) => (
                       <li key={`${idx}-${subIdx}`}>
-                        <a href={sublink.path} className="block py-2 text-2xl">
+                        <Link href={sublink.path} className="block py-2 text-2xl">
                           {sublink.title}
-                        </a>
+                        </Link>
                       </li>
                     ))}
                   </ul>
diff --git a/components/ReportLoadingShade/ReportLoadingShade.tsx b/components/ReportLoadingShade/ReportLoadingShade.tsx
new file mode 100644
index 0000000..3e73fe2
--- /dev/null
+++ b/components/ReportLoadingShade/ReportLoadingShade.tsx
@@ -0,0 +1,21 @@
+"use client"
+import React, { use, useEffect, useState } from "react"
+import Spinner from "components/Spinner"
+import { usePathname } from "next/navigation"
+
+export const ReportLoadingShade: React.FC<{loading:any}> = ({ loading }) => {
+  const pathname = usePathname()
+  const [isLoading, setIsLoading] = useState(false)
+
+  useEffect(() => setIsLoading(false), [pathname])
+  useEffect(() => setIsLoading(true), [loading])
+  
+  if (!isLoading) return null
+
+  return (
+    <div className="fixed left-0 top-0 z-50 flex h-full w-full flex-col items-center justify-center gap-4 bg-white/75">
+      <Spinner />
+      <h3 className="text-4xl">Report is loading...</h3>
+    </div>
+  )
+}
diff --git a/components/ReportLoadingShade/index.ts b/components/ReportLoadingShade/index.ts
new file mode 100644
index 0000000..19fdab1
--- /dev/null
+++ b/components/ReportLoadingShade/index.ts
@@ -0,0 +1,5 @@
+import {
+  ReportLoadingShade
+} from "./ReportLoadingShade"
+
+export default ReportLoadingShade
\ No newline at end of file