From f3fe212f666ff4314b085e3462e03ea36f4a124d Mon Sep 17 00:00:00 2001
From: storywithoutend <storywithoutend@gmail.com>
Date: Fri, 17 Jan 2025 23:57:37 +0800
Subject: [PATCH] fix loading spinner on hamburger button

---
 .../@molecules/Hamburger/Hamburger.tsx        | 27 +++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/@molecules/Hamburger/Hamburger.tsx b/src/components/@molecules/Hamburger/Hamburger.tsx
index 0311a1771..22824b6cf 100644
--- a/src/components/@molecules/Hamburger/Hamburger.tsx
+++ b/src/components/@molecules/Hamburger/Hamburger.tsx
@@ -40,14 +40,27 @@ const Button = styled.button<{ $active: boolean }>(
   `,
 )
 
-const StyledSpinner = styled(Spinner)(
+const SpinnerContainer = styled.div(
   ({ theme }) => css`
+    display: block;
     position: absolute;
-    height: ${theme.space['9']};
-    width: ${theme.space['9']};
     top: -${theme.space['0.5']};
     left: -${theme.space['0.5']};
-    stroke-width: ${theme.space['0.5']};
+
+    div {
+      display: block;
+      position: absolute;
+      height: ${theme.space['9']};
+      width: ${theme.space['9']};
+    }
+
+    svg {
+      display: block;
+      position: absolute;
+      height: ${theme.space['9']};
+      width: ${theme.space['9']};
+      stroke-width: ${theme.space['0.5']};
+    }
   `,
 )
 
@@ -218,7 +231,11 @@ const Hamburger = () => {
 
   const button = (
     <Button ref={btnRef} $active={isOpen} onClick={() => setIsOpen((prev) => !prev)}>
-      {graphOutOfSync && <StyledSpinner color="accent" />}
+      {graphOutOfSync && (
+        <SpinnerContainer>
+          <Spinner color="accent" />
+        </SpinnerContainer>
+      )}
       <MenuSVG />
     </Button>
   )