From e7c9e252cc209bb225587f91d0b9c4a07e841ced Mon Sep 17 00:00:00 2001
From: amalcaraz <amalcaraz89@gmail.com>
Date: Thu, 21 Dec 2023 20:59:10 +0100
Subject: [PATCH] feat: performance tweaks on page navigation

---
 src/components/common/Content/styles.tsx      |  2 +-
 src/components/pages/HomePage/cmp.tsx         |  3 +-
 .../ComputeResourceNodeDetailPage/cmp.tsx     |  2 -
 .../earn/ComputeResourceNodesPage/cmp.tsx     | 78 +++++++++---------
 .../earn/CoreChannelNodeDetailPage/cmp.tsx    |  2 -
 .../pages/earn/CoreChannelNodesPage/cmp.tsx   | 70 ++++++++--------
 .../pages/earn/EarnHomePage/cmp.tsx           |  3 +-
 src/components/pages/earn/StakingPage/cmp.tsx | 82 ++++++++++---------
 src/hooks/common/useLazyRender.ts             | 14 ++++
 src/hooks/common/useRouterLoadState.ts        | 32 ++++++++
 src/pages/_app.tsx                            |  5 ++
 src/pages/loading.tsx                         |  5 ++
 12 files changed, 180 insertions(+), 118 deletions(-)
 create mode 100644 src/hooks/common/useLazyRender.ts
 create mode 100644 src/hooks/common/useRouterLoadState.ts
 create mode 100644 src/pages/loading.tsx

diff --git a/src/components/common/Content/styles.tsx b/src/components/common/Content/styles.tsx
index ca081cd..ca2fe38 100644
--- a/src/components/common/Content/styles.tsx
+++ b/src/components/common/Content/styles.tsx
@@ -2,5 +2,5 @@ import styled from 'styled-components'
 import tw from 'twin.macro'
 
 export const StyledContent = styled.div`
-  ${tw`flex-1 px-5 md:px-16 pb-16 mx-auto w-full max-w-[90rem]`}// @note: 1440px max-width
+  ${tw`relative flex-1 px-5 md:px-16 pb-16 mx-auto w-full max-w-[90rem]`}// @note: 1440px max-width
 `
diff --git a/src/components/pages/HomePage/cmp.tsx b/src/components/pages/HomePage/cmp.tsx
index ff7139c..53fe0d6 100644
--- a/src/components/pages/HomePage/cmp.tsx
+++ b/src/components/pages/HomePage/cmp.tsx
@@ -1,10 +1,9 @@
 import { memo } from 'react'
-import SpinnerOverlay from '@/components/common/SpinnerOverlay'
 import { useRedirect } from '@/hooks/common/useRedirect'
 
 export const HomePage = () => {
   useRedirect('/earn/staking')
-  return <SpinnerOverlay show fullScreen center />
+  return null
 }
 
 export default memo(HomePage)
diff --git a/src/components/pages/earn/ComputeResourceNodeDetailPage/cmp.tsx b/src/components/pages/earn/ComputeResourceNodeDetailPage/cmp.tsx
index 9480ea5..dd683a5 100644
--- a/src/components/pages/earn/ComputeResourceNodeDetailPage/cmp.tsx
+++ b/src/components/pages/earn/ComputeResourceNodeDetailPage/cmp.tsx
@@ -10,7 +10,6 @@ import ColumnLayout from '@/components/common/ColumnLayout'
 import NodeDetailStatus from '@/components/common/NodeDetailStatus'
 import NodeName from '@/components/common/NodeName'
 import NodeDecentralization from '@/components/common/NodeDecentralization'
-import SpinnerOverlay from '@/components/common/SpinnerOverlay'
 import NodeDetailEditableField from '@/components/common/NodeDetailEditableField'
 import NodeDetailLink from '@/components/common/NodeDetailLink'
 
@@ -255,7 +254,6 @@ export const ComputeResourceNodeDetailPage = () => {
           </div>
         </ColumnLayout>
       </section>
-      <SpinnerOverlay show={!node} center />
     </>
   )
 }
diff --git a/src/components/pages/earn/ComputeResourceNodesPage/cmp.tsx b/src/components/pages/earn/ComputeResourceNodesPage/cmp.tsx
index f56093a..ce1e109 100644
--- a/src/components/pages/earn/ComputeResourceNodesPage/cmp.tsx
+++ b/src/components/pages/earn/ComputeResourceNodesPage/cmp.tsx
@@ -19,6 +19,7 @@ import SpinnerOverlay from '@/components/common/SpinnerOverlay'
 import NetworkHealthChart from '@/components/common/NetworkHealthChart'
 import HostingProviderChart from '@/components/common/HostingProviderChart'
 import RewardChart from '@/components/common/RewardChart'
+import { useLazyRender } from '@/hooks/common/useLazyRender'
 
 export const ComputeResourceNodesPage = (
   props: UseComputeResourceNodesPageProps,
@@ -46,6 +47,8 @@ export const ComputeResourceNodesPage = (
     handleLinkableOnlyChange,
   } = useComputeResourceNodesPage(props)
 
+  const { render } = useLazyRender()
+
   const CreateNode = (
     <Link href="/earn/crn/new" passHref legacyBehavior>
       <Button
@@ -150,17 +153,42 @@ export const ComputeResourceNodesPage = (
           />
         </div>
         <div tw="relative">
-          <SpinnerOverlay show={!nodes} />
-          <>
-            {selectedTab === 'user' ? (
-              <>
-                {nodes && filteredUserNodes && (
-                  <>
+          <SpinnerOverlay show={!render || !nodes} />
+          {render && (
+            <>
+              {selectedTab === 'user' ? (
+                <>
+                  {nodes && filteredUserNodes && (
+                    <>
+                      <ComputeResourceNodesTable
+                        {...{
+                          nodes,
+                          filteredNodes: filteredUserNodes,
+                          nodesIssues: userNodesIssues,
+                          userNode,
+                          account,
+                          lastVersion,
+                          handleLink,
+                          handleUnlink,
+                        }}
+                      />
+                      <div tw="my-10 mx-4 text-center opacity-60">
+                        {!account
+                          ? 'Connect your wallet to see your compute node running.'
+                          : !userNodes?.length
+                          ? 'You have no compute node running.'
+                          : ''}
+                      </div>
+                    </>
+                  )}
+                </>
+              ) : (
+                <>
+                  {nodes && filteredNodes && (
                     <ComputeResourceNodesTable
                       {...{
                         nodes,
-                        filteredNodes: filteredUserNodes,
-                        nodesIssues: userNodesIssues,
+                        filteredNodes,
                         userNode,
                         account,
                         lastVersion,
@@ -168,37 +196,13 @@ export const ComputeResourceNodesPage = (
                         handleUnlink,
                       }}
                     />
-                    <div tw="my-10 mx-4 text-center opacity-60">
-                      {!account
-                        ? 'Connect your wallet to see your compute node running.'
-                        : !userNodes?.length
-                        ? 'You have no compute node running.'
-                        : ''}
-                    </div>
-                  </>
-                )}
-              </>
-            ) : (
-              <>
-                {nodes && filteredNodes && (
-                  <ComputeResourceNodesTable
-                    {...{
-                      nodes,
-                      filteredNodes,
-                      userNode,
-                      account,
-                      lastVersion,
-                      handleLink,
-                      handleUnlink,
-                    }}
-                  />
-                )}
-              </>
-            )}
-          </>
+                  )}
+                </>
+              )}
+            </>
+          )}
         </div>
       </section>
-      <SpinnerOverlay show={!nodes} center />
     </>
   )
 }
diff --git a/src/components/pages/earn/CoreChannelNodeDetailPage/cmp.tsx b/src/components/pages/earn/CoreChannelNodeDetailPage/cmp.tsx
index 0a47a9d..f9a99f9 100644
--- a/src/components/pages/earn/CoreChannelNodeDetailPage/cmp.tsx
+++ b/src/components/pages/earn/CoreChannelNodeDetailPage/cmp.tsx
@@ -18,7 +18,6 @@ import ButtonLink from '@/components/common/ButtonLink'
 import NodeDetailLockSwitch from '@/components/common/NodeDetailLockSwitch'
 import NodeDetailStatus from '@/components/common/NodeDetailStatus'
 import NodeDetailEditableField from '@/components/common/NodeDetailEditableField'
-import SpinnerOverlay from '@/components/common/SpinnerOverlay'
 import NodeDetailLink from '@/components/common/NodeDetailLink'
 
 export const CoreChannelNodeDetailPage = () => {
@@ -330,7 +329,6 @@ export const CoreChannelNodeDetailPage = () => {
           </div>
         </ColumnLayout>
       </section>
-      <SpinnerOverlay show={!node} center />
     </>
   )
 }
diff --git a/src/components/pages/earn/CoreChannelNodesPage/cmp.tsx b/src/components/pages/earn/CoreChannelNodesPage/cmp.tsx
index cd7a37e..1b57d15 100644
--- a/src/components/pages/earn/CoreChannelNodesPage/cmp.tsx
+++ b/src/components/pages/earn/CoreChannelNodesPage/cmp.tsx
@@ -13,6 +13,7 @@ import SpinnerOverlay from '@/components/common/SpinnerOverlay'
 import NetworkHealthChart from '@/components/common/NetworkHealthChart'
 import RewardChart from '@/components/common/RewardChart'
 import EstimatedNodeRewardsChart from '@/components/common/EstimatedNodeRewardsChart'
+import { useLazyRender } from '@/hooks/common/useLazyRender'
 
 export const CoreChannelNodesPage = (props: UseCoreChannelNodesPageProps) => {
   const {
@@ -33,6 +34,8 @@ export const CoreChannelNodesPage = (props: UseCoreChannelNodesPageProps) => {
     handleFilterChange,
   } = useCoreChannelNodesPage(props)
 
+  const { render } = useLazyRender()
+
   const CreateNode = (
     <Link href="/earn/ccn/new" passHref legacyBehavior>
       <Button
@@ -128,47 +131,48 @@ export const CoreChannelNodesPage = (props: UseCoreChannelNodesPageProps) => {
           />
         </div>
         <div tw="relative">
-          <SpinnerOverlay show={!nodes} />
-          <>
-            {selectedTab === 'user' ? (
-              <>
-                {nodes && filteredUserNodes && (
-                  <>
+          <SpinnerOverlay show={!render || !nodes} />
+          {render && (
+            <>
+              {selectedTab === 'user' ? (
+                <>
+                  {nodes && filteredUserNodes && (
+                    <>
+                      <CoreChannelNodesTable
+                        {...{
+                          nodes,
+                          filteredNodes: filteredUserNodes,
+                          nodesIssues: userNodesIssues,
+                          lastVersion,
+                        }}
+                      />
+                      <div tw="my-10 mx-4 text-center opacity-60">
+                        {!account
+                          ? 'Connect your wallet to see your core node running.'
+                          : !userNodes?.length
+                          ? 'You have no core node running.'
+                          : ''}
+                      </div>
+                    </>
+                  )}
+                </>
+              ) : (
+                <>
+                  {nodes && filteredNodes && (
                     <CoreChannelNodesTable
                       {...{
                         nodes,
-                        filteredNodes: filteredUserNodes,
-                        nodesIssues: userNodesIssues,
+                        filteredNodes,
                         lastVersion,
                       }}
                     />
-                    <div tw="my-10 mx-4 text-center opacity-60">
-                      {!account
-                        ? 'Connect your wallet to see your core node running.'
-                        : !userNodes?.length
-                        ? 'You have no core node running.'
-                        : ''}
-                    </div>
-                  </>
-                )}
-              </>
-            ) : (
-              <>
-                {nodes && filteredNodes && (
-                  <CoreChannelNodesTable
-                    {...{
-                      nodes,
-                      filteredNodes,
-                      lastVersion,
-                    }}
-                  />
-                )}
-              </>
-            )}
-          </>
+                  )}
+                </>
+              )}
+            </>
+          )}
         </div>
       </section>
-      <SpinnerOverlay show={!nodes} center />
     </>
   )
 }
diff --git a/src/components/pages/earn/EarnHomePage/cmp.tsx b/src/components/pages/earn/EarnHomePage/cmp.tsx
index 1ecdf47..3064734 100644
--- a/src/components/pages/earn/EarnHomePage/cmp.tsx
+++ b/src/components/pages/earn/EarnHomePage/cmp.tsx
@@ -1,10 +1,9 @@
 import { memo } from 'react'
-import SpinnerOverlay from '@/components/common/SpinnerOverlay'
 import { useRedirect } from '@/hooks/common/useRedirect'
 
 export const EarnHomePage = () => {
   useRedirect('/earn/staking')
-  return <SpinnerOverlay show fullScreen center />
+  return null
 }
 
 export default memo(EarnHomePage)
diff --git a/src/components/pages/earn/StakingPage/cmp.tsx b/src/components/pages/earn/StakingPage/cmp.tsx
index 95746b1..27a84bb 100644
--- a/src/components/pages/earn/StakingPage/cmp.tsx
+++ b/src/components/pages/earn/StakingPage/cmp.tsx
@@ -11,6 +11,7 @@ import ToggleDashboard from '@/components/common/ToggleDashboard'
 import SpinnerOverlay from '@/components/common/SpinnerOverlay'
 import RewardChart from '@/components/common/RewardChart'
 import StakeChart from '@/components/common/StakeChart'
+import { useLazyRender } from '@/hooks/common/useLazyRender'
 
 export const StakingPage = (props: UseStakingPageProps) => {
   const {
@@ -36,6 +37,8 @@ export const StakingPage = (props: UseStakingPageProps) => {
     handleStakeableOnlyChange: handleChangeStakeableOnly,
   } = useStakingPage(props)
 
+  const { render } = useLazyRender()
+
   return (
     <>
       <Head>
@@ -118,57 +121,58 @@ export const StakingPage = (props: UseStakingPageProps) => {
           />
         </div>
         <div tw="relative">
-          <SpinnerOverlay show={!nodes} />
-          <>
-            {selectedTab === 'user' ? (
-              <>
-                {nodes && filteredStakeNodes ? (
-                  <>
+          <SpinnerOverlay show={!render || !nodes} />
+          {render && (
+            <>
+              {selectedTab === 'user' ? (
+                <>
+                  {nodes && filteredStakeNodes ? (
+                    <>
+                      <StakingNodesTable
+                        {...{
+                          nodes,
+                          filteredNodes: filteredStakeNodes,
+                          accountBalance,
+                          account,
+                          handleStake,
+                          handleUnstake,
+                          showStakedAmount: true,
+                          nodesIssues,
+                        }}
+                      />
+                      <div tw="my-10 mx-4 text-center opacity-60">
+                        {!account
+                          ? 'Connect your wallet to see your stakes.'
+                          : !stakeNodes?.length
+                          ? 'You are not staking.'
+                          : ''}
+                      </div>
+                    </>
+                  ) : (
+                    <>No data</>
+                  )}
+                </>
+              ) : (
+                <>
+                  {nodes && filteredNodes && (
                     <StakingNodesTable
                       {...{
                         nodes,
-                        filteredNodes: filteredStakeNodes,
+                        filteredNodes,
                         accountBalance,
                         account,
                         handleStake,
                         handleUnstake,
-                        showStakedAmount: true,
                         nodesIssues,
                       }}
                     />
-                    <div tw="my-10 mx-4 text-center opacity-60">
-                      {!account
-                        ? 'Connect your wallet to see your stakes.'
-                        : !stakeNodes?.length
-                        ? 'You are not staking.'
-                        : ''}
-                    </div>
-                  </>
-                ) : (
-                  <>No data</>
-                )}
-              </>
-            ) : (
-              <>
-                {nodes && filteredNodes && (
-                  <StakingNodesTable
-                    {...{
-                      nodes,
-                      filteredNodes,
-                      accountBalance,
-                      account,
-                      handleStake,
-                      handleUnstake,
-                      nodesIssues,
-                    }}
-                  />
-                )}
-              </>
-            )}
-          </>
+                  )}
+                </>
+              )}
+            </>
+          )}
         </div>
       </section>
-      <SpinnerOverlay show={!nodes} center />
     </>
   )
 }
diff --git a/src/hooks/common/useLazyRender.ts b/src/hooks/common/useLazyRender.ts
new file mode 100644
index 0000000..753b1b4
--- /dev/null
+++ b/src/hooks/common/useLazyRender.ts
@@ -0,0 +1,14 @@
+import { useState, useEffect } from 'react'
+
+export type UseLazyRenderReturn = { render: boolean }
+
+export function useLazyRender(): UseLazyRenderReturn {
+  const [render, setRender] = useState(false)
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => setRender(true))
+    return () => clearTimeout(timeoutId)
+  }, [])
+
+  return { render }
+}
diff --git a/src/hooks/common/useRouterLoadState.ts b/src/hooks/common/useRouterLoadState.ts
new file mode 100644
index 0000000..f418887
--- /dev/null
+++ b/src/hooks/common/useRouterLoadState.ts
@@ -0,0 +1,32 @@
+import { useRouter } from 'next/router'
+import { useState, useEffect } from 'react'
+
+export type UseRouterLoadStateReturn = { loading: boolean }
+
+export function useRouterLoadState(): UseRouterLoadStateReturn {
+  const [loading, setLoading] = useState(true)
+  const router = useRouter()
+
+  useEffect(() => {
+    function handleRouteStart() {
+      setLoading(true)
+    }
+
+    function handleRouteEnd() {
+      setLoading(false)
+    }
+
+    router.events.on('routeChangeStart', handleRouteStart)
+    router.events.on('routeChangeComplete', handleRouteEnd)
+    router.events.on('routeChangeError', handleRouteEnd)
+    setLoading(false)
+
+    return () => {
+      router.events.off('routeChangeStart', handleRouteStart)
+      router.events.off('routeChangeComplete', handleRouteStart)
+      router.events.off('routeChangeError', handleRouteEnd)
+    }
+  }, [router])
+
+  return { loading }
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 99f66c6..803ee84 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -10,8 +10,12 @@ import Main from '@/components/common/Main'
 import Sidebar from '@/components/common/Sidebar'
 import Viewport from '@/components/common/Viewport'
 import Content from '@/components/common/Content'
+import Loading from './loading'
+import { useRouterLoadState } from '@/hooks/common/useRouterLoadState'
 
 export default function App({ Component, pageProps }: AppProps) {
+  const { loading } = useRouterLoadState()
+
   return (
     <ThemeProvider theme={themes.dark}>
       <GlobalStyles />
@@ -24,6 +28,7 @@ export default function App({ Component, pageProps }: AppProps) {
               <Header />
               <Content>
                 <Component {...pageProps} />
+                {loading && <Loading />}
               </Content>
               <Footer small />
             </Main>
diff --git a/src/pages/loading.tsx b/src/pages/loading.tsx
new file mode 100644
index 0000000..51d427d
--- /dev/null
+++ b/src/pages/loading.tsx
@@ -0,0 +1,5 @@
+import SpinnerOverlay from '@/components/common/SpinnerOverlay'
+
+export default function Loading() {
+  return <SpinnerOverlay show center />
+}