Skip to content

Commit

Permalink
feat: performance tweaks on page navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
@amalcaraz
amalcaraz committed Dec 21, 2023
1 parent 0bb1495 commit e7c9e25
Show file tree
Hide file tree
Showing 12 changed files with 180 additions and 118 deletions.
2 changes: 1 addition & 1 deletion src/components/common/Content/styles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
`
3 changes: 1 addition & 2 deletions src/components/pages/HomePage/cmp.tsx
View file
Original file line number Diff line number Diff line change
@@ -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)
2 changes: 0 additions & 2 deletions src/components/pages/earn/ComputeResourceNodeDetailPage/cmp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -255,7 +254,6 @@ export const ComputeResourceNodeDetailPage = () => {
</div>
</ColumnLayout>
</section>
<SpinnerOverlay show={!node} center />
</>
)
}
Expand Down
78 changes: 41 additions & 37 deletions src/components/pages/earn/ComputeResourceNodesPage/cmp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -46,6 +47,8 @@ export const ComputeResourceNodesPage = (
handleLinkableOnlyChange,
} = useComputeResourceNodesPage(props)

const { render } = useLazyRender()

const CreateNode = (
<Link href="/earn/crn/new" passHref legacyBehavior>
<Button
Expand Down Expand Up @@ -150,55 +153,56 @@ 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,
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,
userNode,
account,
lastVersion,
handleLink,
handleUnlink,
}}
/>
)}
</>
)}
</>
)}
</>
)}
</>
)}
</div>
</section>
<SpinnerOverlay show={!nodes} center />
</>
)
}
Expand Down
2 changes: 0 additions & 2 deletions src/components/pages/earn/CoreChannelNodeDetailPage/cmp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -330,7 +329,6 @@ export const CoreChannelNodeDetailPage = () => {
</div>
</ColumnLayout>
</section>
<SpinnerOverlay show={!node} center />
</>
)
}
Expand Down
70 changes: 37 additions & 33 deletions src/components/pages/earn/CoreChannelNodesPage/cmp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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
Expand Down Expand Up @@ -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 />
</>
)
}
Expand Down
3 changes: 1 addition & 2 deletions src/components/pages/earn/EarnHomePage/cmp.tsx
View file
Original file line number Diff line number Diff line change
@@ -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)
82 changes: 43 additions & 39 deletions src/components/pages/earn/StakingPage/cmp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -36,6 +37,8 @@ export const StakingPage = (props: UseStakingPageProps) => {
handleStakeableOnlyChange: handleChangeStakeableOnly,
} = useStakingPage(props)

const { render } = useLazyRender()

return (
<>
<Head>
Expand Down Expand Up @@ -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 />
</>
)
}
Expand Down
Loading

0 comments on commit e7c9e25

Please sign in to comment.