feat: lots updates

src/routes/home/Loading.js

@@ -1,9 +1,13 @@
-// import React from 'react'
+import { useState, useEffect } from "react";
 import styled from "styled-components";
+import Button from "../../common/component/styled/Button";
+import useLogout from "../../common/hook/useLogout";
 const StyledWrapper = styled.div`
   width: 100vw;
   height: 100vh;
   display: flex;
+  flex-direction: column;
+  gap: 15px;
   align-items: center;
   justify-content: center;
   .loading {
@@ -19,11 +23,41 @@ const StyledWrapper = styled.div`
     border: 4px solid #999;
     border-radius: 50%;
   }
+  .reload {
+    visibility: hidden;
+    &.visible {
+      visibility: visible;
+    }
+  }
 `;
 export default function Loading() {
+  const [reloadVisible, setReloadVisible] = useState(false);
+  const { clearLocalData } = useLogout();
+  const handleReload = () => {
+    clearLocalData();
+    location.reload(true);
+  };
+  useEffect(() => {
+    const inter = setTimeout(() => {
+      setReloadVisible(true);
+    }, 1500);
+
+    return () => {
+      clearTimeout(inter);
+    };
+  }, []);
+
   return (
     <StyledWrapper>
       <div className="loading">Loading...</div>
+      {reloadVisible && (
+        <Button
+          className={`reload danger ${reloadVisible ? "visible" : ""}`}
+          onClick={handleReload}
+        >
+          Reload
+        </Button>
+      )}
     </StyledWrapper>
   );
 }