From e1bd5868edbe1b4b857e453f5543c98549dc00cd Mon Sep 17 00:00:00 2001
From: Huh Hyeongjun <hhj@devent.kr>
Date: Tue, 25 Feb 2025 18:24:20 +0900
Subject: [PATCH] feat: loading icon on button

---
 src/components/map/Processing.tsx |  23 +++-
 src/components/nav/TopNav.tsx     | 168 ++++++++++++++++++------------
 2 files changed, 125 insertions(+), 66 deletions(-)

diff --git a/src/components/map/Processing.tsx b/src/components/map/Processing.tsx
index 605e5da..5a0b6ae 100644
--- a/src/components/map/Processing.tsx
+++ b/src/components/map/Processing.tsx
@@ -1,5 +1,6 @@
 import { useAreaStore } from "@/state/areaStore";
-import { css } from "@emotion/react";
+import { css, keyframes } from "@emotion/react";
+import { Loader2 } from "lucide-react";
 import React, { useState } from "react";
 
 interface Building {
@@ -8,11 +9,20 @@ interface Building {
   geometry?: { lat: number; lng: number }[];
 }
 
+const spinAnimation = keyframes`
+from { transform: rotate(0deg); }
+to { transform: rotate(360deg); }
+`;
+
 export function BuildingHeights({ area }: { area: any }) {
   const [buildings, setBuildings] = useState<Building[]>([]);
+  const [loading, setLoading] = useState(false);
+
   const appendAreas = useAreaStore((state) => state.appendAreas);
 
   const requestBuildings = () => {
+    setLoading(true);
+
     const south = area[1].lat;
     const west = area[1].lng;
     const north = area[0].lat;
@@ -40,6 +50,9 @@ export function BuildingHeights({ area }: { area: any }) {
       })
       .catch((error) => {
         console.error("Error fetching building data:", error);
+      })
+      .finally(() => {
+        setLoading(false);
       });
   };
 
@@ -70,6 +83,14 @@ export function BuildingHeights({ area }: { area: any }) {
         })}
         onClick={requestBuildings}
       >
+        {loading && (
+          <Loader2
+            css={css({
+              animation: `${spinAnimation} 1s linear infinite`,
+            })}
+            size={16}
+          />
+        )}
         request
       </button>
       <ul
diff --git a/src/components/nav/TopNav.tsx b/src/components/nav/TopNav.tsx
index 35774a9..7ed3f65 100644
--- a/src/components/nav/TopNav.tsx
+++ b/src/components/nav/TopNav.tsx
@@ -1,5 +1,10 @@
 import { useCarStore } from "@/state/carStore";
 import { css } from "@emotion/react";
+import { DetailedHTMLProps, ButtonHTMLAttributes, useState } from "react";
+import { Modal } from "../modal/Modal";
+import { Column } from "../flex/Column";
+import { Title } from "../text/Title";
+import { Description } from "../text/Description";
 
 const TOP_PANEL_HEIGHT = "3rem";
 const BORDER_COLOR = "#ededf290";
@@ -7,86 +12,119 @@ const BORDER_COLOR = "#ededf290";
 const breakpoints = [768];
 const mq = breakpoints.map((bp) => `@media (max-width: ${bp}px)`);
 
+interface ButtonProps
+  extends DetailedHTMLProps<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  > {
+  isShow?: boolean;
+}
+
 export function TopNav({ step }: { step: number }) {
   const setThirdMode = useCarStore((state) => state.setThirdMode);
+  const [openModal, setOpenModal] = useState(false);
 
   return (
-    <div
-      css={css({
-        display: "flex",
-        transition: ".5s",
-        transform: "translate(0px, 0px)",
-        position: "fixed",
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: TOP_PANEL_HEIGHT,
-        backgroundColor: "#ffffff50",
-        backdropFilter: "blur(12px)",
-        borderBottom: `1px solid ${BORDER_COLOR}`,
-        zIndex: 9999,
-        justifyContent: "space-between",
-        alignItems: "center",
-      })}
-    >
+    <>
       <div
         css={css({
-          paddingLeft: "2rem",
-          alignItems: "center",
-          flexDirection: "row",
           display: "flex",
-          gap: "0.75rem",
+          transition: ".5s",
+          transform: "translate(0px, 0px)",
+          position: "fixed",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: TOP_PANEL_HEIGHT,
+          backgroundColor: "#ffffff50",
+          backdropFilter: "blur(12px)",
+          borderBottom: `1px solid ${BORDER_COLOR}`,
+          zIndex: 9999,
+          justifyContent: "space-between",
+          alignItems: "center",
         })}
       >
-        <span
+        <div
           css={css({
-            fontSize: "14px",
-            fontWeight: "600",
-            color: "#5b5d63",
+            paddingLeft: "2rem",
+            alignItems: "center",
+            flexDirection: "row",
+            display: "flex",
+            gap: "0.75rem",
           })}
         >
-          🗺️ Map3d
-        </span>
-      </div>
+          <span
+            css={css({
+              fontSize: "14px",
+              fontWeight: "600",
+              color: "#5b5d63",
+            })}
+          >
+            🗺️ Map3d
+          </span>
+        </div>
 
-      <div
-        css={css({
-          padding: "0rem 0rem",
-          [mq[0]]: {
-            display: "none",
-          },
-        })}
-      ></div>
+        <div
+          css={css({
+            padding: "0rem 0rem",
+            [mq[0]]: {
+              display: "none",
+            },
+          })}
+        ></div>
 
-      <div
-        css={css({
-          paddingRight: "1rem",
-          display: "flex",
-          flexDirection: "row",
-          gap: "0.5rem",
-          [mq[0]]: {
-            display: "none",
-          },
-        })}
-      >
-        <button
-          style={{
-            display: step == 2 ? "" : "none",
-            color: "#000000",
-            backgroundColor: "#ffffff96",
-            backdropFilter: "blur(8px)",
-            border: "none",
-            padding: "0.5rem 1rem",
-            borderRadius: "8px",
-            fontWeight: "300",
-            fontSize: "12px",
-            outline: "rgba(240, 240, 244, 0.51) solid 0.1rem",
-          }}
-          onClick={() => setThirdMode(true)}
+        <div
+          css={css({
+            paddingRight: "2rem",
+            display: "flex",
+            flexDirection: "row",
+            gap: "0.5rem",
+          })}
         >
-          Car Mode
-        </button>
+          <NavButton
+            isShow={true}
+            onClick={() => window.open("https://github.com/cartesiancs/map3d")}
+          >
+            GitHub
+          </NavButton>
+          <NavButton isShow={step >= 1} onClick={() => setOpenModal(true)}>
+            Options
+          </NavButton>
+
+          <NavButton isShow={step == 2} onClick={() => setThirdMode(true)}>
+            Car Mode
+          </NavButton>
+        </div>
       </div>
-    </div>
+
+      <Modal isOpen={openModal} onClose={() => setOpenModal(false)}>
+        <Column gap="0.5rem">
+          <Title>Options </Title>
+        </Column>
+      </Modal>
+    </>
+  );
+}
+
+export function NavButton(props: ButtonProps) {
+  return (
+    <button
+      css={css({
+        color: "#000000",
+        backgroundColor: "#ffffff96",
+        backdropFilter: "blur(8px)",
+        border: "none",
+        padding: "0.5rem 1rem",
+        borderRadius: "8px",
+        fontWeight: "300",
+        fontSize: "12px",
+        outline: "rgba(240, 240, 244, 0.51) solid 0.1rem",
+        display: props.isShow ? "" : "none",
+        cursor: "pointer",
+      })}
+      {...props}
+    >
+      {props.children}
+    </button>
   );
 }