From d279e6cc2eef9deced1dc8c9115f706633d0909c Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Fri, 21 Jul 2023 14:49:24 +0100
Subject: [PATCH] fix: remove nprogress for page redirection flicker

---
 src/app/providers.tsx     |  4 +-
 src/css/tailwind.css      | 88 ---------------------------------------
 src/hooks/useNProgress.ts |  2 +-
 3 files changed, 3 insertions(+), 91 deletions(-)

diff --git a/src/app/providers.tsx b/src/app/providers.tsx
index 72ae562b..a358f7d5 100644
--- a/src/app/providers.tsx
+++ b/src/app/providers.tsx
@@ -14,7 +14,7 @@ import { ModalStackProvider } from "~/components/ui/ModalStack"
 // eslint-disable-next-line import/no-unresolved
 import { useDarkMode } from "~/hooks/useDarkMode"
 import { useMobileLayout } from "~/hooks/useMobileLayout"
-import { useNProgress } from "~/hooks/useNProgress"
+// import { useNProgress } from "~/hooks/useNProgress"
 import { APP_NAME, WALLET_CONNECT_V2_PROJECT_ID } from "~/lib/env"
 import { filterNotificationCharacter } from "~/lib/filter-character"
 import { toGateway } from "~/lib/ipfs-parser"
@@ -44,7 +44,7 @@ export default function Providers({
 }) {
   useDarkMode()
   useMobileLayout()
-  useNProgress()
+  // useNProgress()
 
   const [queryClient] = useState(createQueryClient)
 
diff --git a/src/css/tailwind.css b/src/css/tailwind.css
index e9c4ed20..998f8d28 100644
--- a/src/css/tailwind.css
+++ b/src/css/tailwind.css
@@ -392,94 +392,6 @@ textarea.input {
   background-color: var(--banner-bg-color);
 }
 
-/* Fancy blur effect */
-#qprogress .peg {
-  display: block;
-  position: absolute;
-  right: 0px;
-  width: 100px;
-  height: 100%;
-  opacity: 1;
-
-  -webkit-transform: rotate(3deg) translate(0px, -4px);
-  -ms-transform: rotate(3deg) translate(0px, -4px);
-  transform: rotate(3deg) translate(0px, -4px);
-}
-
-.qprogress-custom-parent {
-  overflow: hidden;
-  position: relative;
-}
-
-.qprogress-custom-parent #qprogress .bar {
-  position: absolute;
-}
-
-/* Colorful effect */
-#qprogress .colorful-bar {
-  background: -webkit-gradient(
-    linear,
-    left top,
-    right top,
-    from(#1890ff),
-    color-stop(#13c2c2),
-    color-stop(#52c41a),
-    color-stop(#fa8c16),
-    color-stop(#fa541c),
-    color-stop(#f5222d),
-    to(#1890ff)
-  );
-  background: -webkit-linear-gradient(
-    left,
-    #1890ff,
-    #13c2c2,
-    #52c41a,
-    #fa8c16,
-    #fa541c,
-    #f5222d,
-    #1890ff
-  );
-  background: linear-gradient(
-    to right,
-    #1890ff,
-    #13c2c2,
-    #52c41a,
-    #fa8c16,
-    #fa541c,
-    #f5222d,
-    #1890ff
-  );
-
-  -webkit-animation: 2s linear infinite ins;
-  animation: 2s linear infinite ins;
-
-  -webkit-transition: opacity 0.2s ease-in-out;
-  transition: opacity 0.2s ease-in-out;
-
-  -webkit-transform-origin: left;
-  transform-origin: left;
-
-  background-size: 500%;
-}
-
-@-webkit-keyframes ins {
-  0% {
-    background-position: 0% 0;
-  }
-  to {
-    background-position: 125% 0;
-  }
-}
-
-@keyframes ins {
-  0% {
-    background-position: 0% 0;
-  }
-  to {
-    background-position: 125% 0;
-  }
-}
-
 .loading:before {
   height: 1rem;
   width: 1rem;
diff --git a/src/hooks/useNProgress.ts b/src/hooks/useNProgress.ts
index decba3e5..cd32fe1b 100644
--- a/src/hooks/useNProgress.ts
+++ b/src/hooks/useNProgress.ts
@@ -19,7 +19,7 @@ export const useNProgress = () => {
         instance.current.start()
       }),
     )
-    disposers.push(events.onComplete(() => instance.current.finish()))
+    // disposers.push(events.onComplete(() => instance.current.finish()))
     return () => disposers.forEach((disposer) => disposer())
   }, [])
 }