refactor spinner and cleanup

uchicago-dsi · Aug 5, 2024 · 0bcb86c · 0bcb86c
1 parent 28affa3
commit 0bcb86c
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 50 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -0,0 +1,5 @@
+import {
+  ReportLoadingShade
+} from "./ReportLoadingShade"
+
+export default ReportLoadingShade