feat: Improve page loading (#362)

* feat: Improve page loading * fix: Fix a initialize loading * feat: Separate loading states * feat: Separate loading states * fix: Fix loading pools condition * feat: Change token list loading condition * feat: Memorized scroll information * refactor: Remove console log * fix: fetch position API condition * feat: Add fetching bins at mouse over event * fix: Fix a build error * fix: Memorize earn page scroll * fix: Fix a load more state * fix: Fix a API Response * fix: Fix a loading bins * fix: Fix api error to default value
gnoswap-labs · May 29, 2024 · 2b7f522 · 2b7f522
1 parent 49a400c
commit 2b7f522
Show file tree

Hide file tree

Showing 108 changed files with 2,490 additions and 1,339 deletions.
diff --git a/packages/web/src/components/common/header-side-menu-modal/HeaderSideMenuModal.tsx b/packages/web/src/components/common/header-side-menu-modal/HeaderSideMenuModal.tsx
@@ -12,7 +12,7 @@ import {
 } from "./HeaderSideMenuModal.styles";
 import IconOpenLink from "@components/common/icons/IconOpenLink";
 import IconAccountUser from "../icons/IconAccountUser";
-import { useRouter } from "next/router";
+import useRouter from "@hooks/common/use-custom-router";
 import IconPulse from "../icons/IconPulse";
 
 interface HeaderSideMenuModalProps {
@@ -44,7 +44,7 @@ const HeaderSideMenuModal: React.FC<HeaderSideMenuModalProps> = ({
     <HeaderSideMenuModalWrapper ref={menuRef}>
       <Navigation>
         <ul>
-        <li onClick={() => router.push(SIDE_MENU_NAV.DASHBOARD.path)}>
+          <li onClick={() => router.push(SIDE_MENU_NAV.DASHBOARD.path)}>
             <Link href={SIDE_MENU_NAV.DASHBOARD.path}>
               <LeftIconMenu>
                 <LeftIcon>
@@ -71,7 +71,7 @@ const HeaderSideMenuModal: React.FC<HeaderSideMenuModalProps> = ({
             <Link href={SIDE_MENU_NAV.HELPCENTER.path}>
               <RightIconMenu>
                 {SIDE_MENU_NAV.HELPCENTER.title}
-                <LinkIconButton >
+                <LinkIconButton>
                   <IconOpenLink className="right-icon" />
                 </LinkIconButton>
               </RightIconMenu>
@@ -87,7 +87,10 @@ const HeaderSideMenuModal: React.FC<HeaderSideMenuModalProps> = ({
               </RightIconMenu>
             </Link>
           </li>
-          <li className="last-side-menu" onClick={() => router.push(SIDE_MENU_NAV.LEGALPRIVACY.path)}>
+          <li
+            className="last-side-menu"
+            onClick={() => router.push(SIDE_MENU_NAV.LEGALPRIVACY.path)}
+          >
             <Link href={SIDE_MENU_NAV.LEGALPRIVACY.path}>
               <RightIconMenu>
                 {SIDE_MENU_NAV.LEGALPRIVACY.title}

diff --git a/packages/web/src/components/common/loading-spinner/LoadingSpinner.styles.ts b/packages/web/src/components/common/loading-spinner/LoadingSpinner.styles.ts
@@ -1,6 +1,7 @@
 import { media } from "@styles/media";
-import { css, keyframes, Theme } from "@emotion/react";
+import { keyframes } from "@emotion/react";
 import mixins from "@styles/mixins";
+import styled from "@emotion/styled";
 
 const spin = keyframes`
   from {
@@ -11,33 +12,40 @@ const spin = keyframes`
   }
 `;
 
-export const wrapper = (theme: Theme) => css`
+export const LoadingSpinnerWrapper = styled.div<{
+  container: number;
+  circle: number;
+  mobileContainer: number;
+  mobileCircle: number;
+}>`
   position: relative;
-  width: 72px;
-  height: 72px;
+  width: ${({ container }) => `${container}px`};
+  height: ${({ container }) => `${container}px`};
   border-radius: 100%;
   animation: ${spin} 1s linear infinite;
   background: conic-gradient(
     from 0deg at 50% 50.63%,
-    ${theme.color.bgLoading} 0deg,
-    #233DBD 360deg
+    ${({ theme }) => theme.color.bgLoading} 0deg,
+    #233dbd 360deg
   );
 
   &::before {
     ${mixins.positionCenter()};
     content: "";
-    background-color: ${theme.color.background06};
-    width: 60px;
-    height: 60px;
+    background-color: ${({ theme }) => theme.color.background06};
+    width: ${({ circle }) => `${circle}px`};
+    height: ${({ circle }) => `${circle}px`};
     border-radius: 100%;
-    box-shadow: ${theme.color.shadow02};
+    box-shadow: ${({ theme }) => theme.color.shadow02};
   }
+
   ${media.mobile} {
-    width: 60px;
-    height: 60px;
+    width: ${({ mobileContainer }) => `${mobileContainer}px`};
+    height: ${({ mobileContainer }) => `${mobileContainer}px`};
+
     &::before {
-      width: 48px;
-      height: 48px;
+      width: ${({ mobileCircle }) => `${mobileCircle}px`};
+      height: ${({ mobileCircle }) => `${mobileCircle}px`};
     }
   }
 `;
diff --git a/packages/web/src/components/common/loading-spinner/LoadingSpinner.tsx b/packages/web/src/components/common/loading-spinner/LoadingSpinner.tsx
@@ -1,7 +1,30 @@
-import { wrapper } from "./LoadingSpinner.styles";
+import { LoadingSpinnerWrapper } from "./LoadingSpinner.styles";
 
-const LoadingSpinner = ({className} : {className?: string}) => {
-  return <div css={wrapper} className={className} />;
+const LOADING_SIZE_MAP = {
+  DEFAULT: {
+    container: 72,
+    circle: 60,
+    mobileContainer: 60,
+    mobileCircle: 48,
+  },
+  SMALL: {
+    container: 30,
+    circle: 22,
+    mobileContainer: 30,
+    mobileCircle: 22,
+  },
+} as const;
+
+const LoadingSpinner = ({
+  className,
+  size = "DEFAULT",
+}: {
+  className?: string;
+  size?: "DEFAULT" | "SMALL";
+}) => {
+  return (
+    <LoadingSpinnerWrapper className={className} {...LOADING_SIZE_MAP[size]} />
+  );
 };
 
 export default LoadingSpinner;
diff --git a/packages/web/src/components/common/my-position-card/MyPositionCard.styles.ts b/packages/web/src/components/common/my-position-card/MyPositionCard.styles.ts
@@ -44,32 +44,31 @@ export const MyPositionCardWrapperBorder = styled.div<MyPositionCardWrapperBorde
         }
       }
     }
-
   }
   &:hover {
     box-shadow: ${({ viewMyRange }) => {
-    return !viewMyRange ? "8px 8px 20px rgba(0, 0, 0, 0.08)" : "none";
-  }};
+      return !viewMyRange ? "8px 8px 20px rgba(0, 0, 0, 0.08)" : "none";
+    }};
     .base-border {
       > div {
         background-color: ${({ theme, viewMyRange }) => {
-    return viewMyRange ? "none" : theme.color.background02;
-  }};
+          return viewMyRange ? "none" : theme.color.background02;
+        }};
       }
     }
   }
   &:before {
     display: ${({ viewMyRange }) => {
-    return !viewMyRange ? "none" : "block";
-  }};
+      return !viewMyRange ? "none" : "block";
+    }};
     position: absolute;
     content: "";
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 10px;
-    background-color: ${({ theme }) => theme.color.backgroundOpacity8}
+    background-color: ${({ theme }) => theme.color.backgroundOpacity8};
   }
 `;
 
@@ -98,11 +97,12 @@ export const MyPositionCardWrapper = styled.div<CardProps>`
   cursor: pointer;
   &:hover {
     background-color: ${({ viewMyRange, theme }) => {
-    return viewMyRange ? "none" : theme.color.background02;
-  }};
-    border: 1px solid ${({ viewMyRange, theme }) => {
-    return viewMyRange ? "none" : theme.color.border14;
-  }};;
+      return viewMyRange ? "none" : theme.color.background02;
+    }};
+    border: 1px solid
+      ${({ viewMyRange, theme }) => {
+        return viewMyRange ? "none" : theme.color.border14;
+      }};
   }
   .title-wrapper {
     ${mixins.flexbox("row", "center", "space-between")};
@@ -120,9 +120,7 @@ export const MyPositionCardWrapper = styled.div<CardProps>`
       gap: 8px;
       > span {
         ${fonts.body7}
-
       }
-
     }
     .badge-group {
       ${mixins.flexbox("row", "center", "flex-start")};
@@ -185,7 +183,7 @@ export const MyPositionCardWrapper = styled.div<CardProps>`
       > svg {
         width: 18px;
         height: 16px;
-  
+
         * {
           fill: ${({ theme }) => theme.color.icon15};
         }
@@ -207,7 +205,7 @@ export const MyPositionCardWrapper = styled.div<CardProps>`
     left: 1px;
     bottom: -25px;
     width: calc(100% - 2px);
-    background-color: ${({ theme }) => theme.color.background06};;
+    background-color: ${({ theme }) => theme.color.background06};
     border-radius: 8px;
     cursor: default;
     box-shadow: 0px -4px 4px 0px #00000040;
@@ -249,9 +247,22 @@ export const MyPositionCardWrapper = styled.div<CardProps>`
   }
 
   .chart-wrapper {
+    display: flex;
     width: 100%;
-    cursor: default;
     margin-top: 16px;
+    align-items: center;
+    justify-content: center;
+    cursor: default;
+  }
+
+  .graph-loading-wrapper {
+    display: flex;
+    width: 100%;
+    margin-top: 36px;
+    padding: 15px;
+    align-items: center;
+    justify-content: center;
+    cursor: default;
   }
 
   .min-max-price {