refactor: add typescript definition and fix some type error

src/common/component/Loading.tsx

@@ -1,16 +1,16 @@
-// import { useState, useEffect } from "react";
+import { FC } from "react";
 import styled, { keyframes } from "styled-components";
 import { Ring } from "@uiball/loaders";
 import Button from "./styled/Button";
 import useLogout from "../hook/useLogout";
 
 const DelayVisible = keyframes`
-from{
-opacity: 0;
-}
-to{
-opacity: 1;
-}
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 `;
 
 const StyledWrapper = styled.div`
@@ -21,17 +21,15 @@ const StyledWrapper = styled.div`
   gap: 15px;
   align-items: center;
   justify-content: center;
+
   &.fullscreen {
     width: 100vw;
     height: 100vh;
   }
-  .loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+
   .reload {
     opacity: 0;
+
     &.visible {
       animation: ${DelayVisible} 1s forwards;
       animation-delay: 30s;
@@ -39,20 +37,26 @@ const StyledWrapper = styled.div`
   }
 `;
 
-export default function Loading({ reload = false, fullscreen = false }) {
+interface Props {
+  reload?: boolean;
+  fullscreen?: boolean;
+}
+
+const Loading: FC<Props> = ({ reload = false, fullscreen = false }) => {
   const { clearLocalData } = useLogout();
   const handleReload = () => {
     clearLocalData();
-    // todo: only firefox has argument
-    location.reload(true);
+    location.reload();
   };
 
   return (
     <StyledWrapper className={fullscreen ? "fullscreen" : ""}>
-      <Ring className="loading" size={40} lineWeight={5} speed={2} color="black" />
+      <Ring size={40} lineWeight={5} speed={2} color="black" />
       <Button className={`reload danger ${reload ? "visible" : ""}`} onClick={handleReload}>
         Reload
       </Button>
     </StyledWrapper>
   );
-}
+};
+
+export default Loading;