add loader on different pages

liteflow-labs · Apr 21, 2023 · e3fadeb · e3fadeb
1 parent ef97a9c
commit e3fadeb
Show file tree

Hide file tree

Showing 22 changed files with 78 additions and 28 deletions.
diff --git a/pages/account/edit.tsx b/pages/account/edit.tsx
@@ -5,6 +5,7 @@ import { useRouter } from 'next/router'
 import { useCallback } from 'react'
 import AccountTemplate from '../../components/Account/Account'
 import Head from '../../components/Head'
+import Loader from '../../components/Loader'
 import UserFormEdit from '../../components/User/Form/Edit'
 import environment from '../../environment'
 import { useGetAccountQuery } from '../../graphql'
@@ -24,7 +25,7 @@ const EditPage: NextPage = () => {
 
   const toast = useToast()
 
-  const { data } = useGetAccountQuery({
+  const { data, loading } = useGetAccountQuery({
     variables: {
       address: address || '',
     },
@@ -42,6 +43,7 @@ const EditPage: NextPage = () => {
     [toast, t, push],
   )
 
+  if (loading) return <Loader fullPage />
   if (!data?.account) return <></>
   return (
     <SmallLayout>

diff --git a/pages/account/wallet.tsx b/pages/account/wallet.tsx
@@ -2,6 +2,7 @@ import { NextPage } from 'next'
 import { useMemo } from 'react'
 import AccountTemplate from '../../components/Account/Account'
 import Head from '../../components/Head'
+import Loader from '../../components/Loader'
 import WalletAccount from '../../components/Wallet/Account/Wallet'
 import { useWalletCurrenciesQuery } from '../../graphql'
 import useAccount from '../../hooks/useAccount'
@@ -13,9 +14,10 @@ const WalletPage: NextPage = () => {
   const ready = useEagerConnect()
   const { address } = useAccount()
   useLoginRedirect(ready)
-  const { data } = useWalletCurrenciesQuery()
+  const { data, loading } = useWalletCurrenciesQuery()
   const currencies = useMemo(() => data?.currencies?.nodes, [data])
 
+  if (loading) return <Loader fullPage />
   if (!currencies) return <></>
   if (!address) return <></>
   return (

diff --git a/pages/checkout/[id].tsx b/pages/checkout/[id].tsx
@@ -14,6 +14,7 @@ import { useRouter } from 'next/router'
 import { useCallback, useMemo } from 'react'
 import Head from '../../components/Head'
 import Image from '../../components/Image/Image'
+import Loader from '../../components/Loader'
 import BackButton from '../../components/Navbar/BackButton'
 import OfferFormCheckout from '../../components/Offer/Form/Checkout'
 import Price from '../../components/Price/Price'
@@ -49,7 +50,7 @@ const CheckoutPage: NextPage<Props> = ({ now }) => {
   const { address } = useAccount()
 
   const date = useMemo(() => new Date(now), [now])
-  const { data } = useCheckoutQuery({
+  const { data, loading } = useCheckoutQuery({
     variables: {
       id: offerId,
       now: date,
@@ -79,6 +80,7 @@ const CheckoutPage: NextPage<Props> = ({ now }) => {
     await push(`/tokens/${data.offer.asset.id}`)
   }, [data, toast, t, push])
 
+  if (loading) return <Loader fullPage />
   if (!offer) return null
   if (!asset) return null
   return (

diff --git a/pages/collection/[chainId]/[id].tsx b/pages/collection/[chainId]/[id].tsx
@@ -22,6 +22,7 @@ import Empty from '../../../components/Empty/Empty'
 import FilterAsset, { NoFilter } from '../../../components/Filter/FilterAsset'
 import FilterNav from '../../../components/Filter/FilterNav'
 import Head from '../../../components/Head'
+import Loader from '../../../components/Loader'
 import Pagination from '../../../components/Pagination/Pagination'
 import Select from '../../../components/Select/Select'
 import TokenCard from '../../../components/Token/Card'
@@ -67,7 +68,7 @@ const CollectionPage: FC<Props> = ({ now }) => {
   const { t } = useTranslation('templates')
   const date = useMemo(() => new Date(now), [now])
   const { address } = useAccount()
-  const { data: collectionData } = useFetchCollectionDetailsQuery({
+  const { data: collectionData, loading } = useFetchCollectionDetailsQuery({
     variables: {
       collectionAddress: collectionAddress,
       chainId: chainId,
@@ -83,7 +84,7 @@ const CollectionPage: FC<Props> = ({ now }) => {
     [currencyData],
   )
   const filter = useAssetFilterFromQuery(currencies)
-  const { data } = useFetchCollectionAssetsQuery({
+  const { data, loading: assetLoading } = useFetchCollectionAssetsQuery({
     variables: {
       collectionAddress,
       now: date,
@@ -141,6 +142,7 @@ const CollectionPage: FC<Props> = ({ now }) => {
 
   const [changePage, changeLimit] = usePaginate()
 
+  if (loading) return <Loader fullPage />
   if (!collectionDetails) return null
   return (
     <LargeLayout>
@@ -216,6 +218,7 @@ const CollectionPage: FC<Props> = ({ now }) => {
           </GridItem>
         )}
         <GridItem gap={6} colSpan={showFilters ? 1 : 2}>
+          {assetLoading && <Loader />}
           {data?.assets?.totalCount && data?.assets?.totalCount > 0 ? (
             <SimpleGrid
               flexWrap="wrap"

diff --git a/pages/create/[chainId]/[collectionAddress].tsx b/pages/create/[chainId]/[collectionAddress].tsx
@@ -24,6 +24,7 @@ import { useRouter } from 'next/router'
 import React, { useCallback, useMemo, useState } from 'react'
 import Head from '../../../components/Head'
 import Link from '../../../components/Link/Link'
+import Loader from '../../../components/Loader'
 import BackButton from '../../../components/Navbar/BackButton'
 import type { Props as NFTCardProps } from '../../../components/Token/Card'
 import TokenCard from '../../../components/Token/Card'
@@ -62,7 +63,7 @@ const CreatePage: NextPage = ({}) => {
   const { address } = useAccount()
   const { data: config } = useConfig()
   const toast = useToast()
-  const { data } = useFetchAccountAndCollectionQuery({
+  const { data, loading } = useFetchAccountAndCollectionQuery({
     variables: {
       chainId,
       collectionAddress,
@@ -130,6 +131,8 @@ const CreatePage: NextPage = ({}) => {
     [push, t, toast],
   )
 
+  if (loading) return <Loader fullPage />
+
   if (environment.RESTRICT_TO_VERIFIED_ACCOUNT && !creator.verified) {
     return (
       <Layout>

diff --git a/pages/create/index.tsx b/pages/create/index.tsx
@@ -21,6 +21,7 @@ import React from 'react'
 import Empty from '../../components/Empty/Empty'
 import Head from '../../components/Head'
 import Link from '../../components/Link/Link'
+import Loader from '../../components/Loader'
 import BackButton from '../../components/Navbar/BackButton'
 import environment from '../../environment'
 import {
@@ -62,7 +63,7 @@ const CreatePage: NextPage = () => {
       },
     })
 
-  if (loading) return <></>
+  if (loading) return <Loader fullPage />
 
   if (
     environment.RESTRICT_TO_VERIFIED_ACCOUNT &&

diff --git a/pages/explore/collections.tsx b/pages/explore/collections.tsx
@@ -44,7 +44,7 @@ const CollectionsPage: NextPage<Props> = ({}) => {
   const { limit, offset, page } = usePaginateQuery()
   const orderBy = useOrderByQuery<CollectionsOrderBy>('TOTAL_VOLUME_DESC')
   const search = useQueryParamSingle('search')
-  const { data } = useFetchExploreCollectionsQuery({
+  const { data, loading } = useFetchExploreCollectionsQuery({
     variables: {
       limit,
       offset,
@@ -83,7 +83,7 @@ const CollectionsPage: NextPage<Props> = ({}) => {
 
       <ExploreTemplate
         title={t('explore.title')}
-        loading={pageLoading || loadingOrder}
+        loading={pageLoading || loadingOrder || loading}
         search={search}
         selectedTabIndex={1}
       >

diff --git a/pages/explore/users.tsx b/pages/explore/users.tsx
@@ -32,7 +32,7 @@ const UsersPage: NextPage<Props> = () => {
   const { t } = useTranslation('templates')
   const { limit, offset, page } = usePaginateQuery()
   const search = useQueryParamSingle('search')
-  const { data } = useFetchExploreUsersQuery({
+  const { data, loading } = useFetchExploreUsersQuery({
     variables: {
       limit,
       offset,
@@ -50,7 +50,7 @@ const UsersPage: NextPage<Props> = () => {
 
       <ExploreTemplate
         title={t('explore.title')}
-        loading={pageLoading}
+        loading={pageLoading || loading}
         search={search}
         selectedTabIndex={2}
       >

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -13,6 +13,7 @@ import { NextPage } from 'next'
 import useTranslation from 'next-translate/useTranslation'
 import { useCallback, useEffect, useMemo } from 'react'
 import Link from '../components/Link/Link'
+import Loader from '../components/Loader'
 import Slider from '../components/Slider/Slider'
 import TokenCard from '../components/Token/Card'
 import TokenHeader from '../components/Token/Header'
@@ -58,7 +59,7 @@ const HomePage: NextPage<Props> = ({ now }) => {
     return (tokensToRender?.assets?.nodes || []).map((x) => x.id)
   }, [tokensToRender])
 
-  const { data, refetch, error } = useFetchHomePageQuery({
+  const { data, refetch, error, loading } = useFetchHomePageQuery({
     variables: {
       featuredIds: environment.FEATURED_TOKEN,
       now: date,
@@ -119,6 +120,9 @@ const HomePage: NextPage<Props> = ({ now }) => {
       )),
     [featured, address, signer, reloadInfo, currencies],
   )
+
+  if (loading) return <Loader fullPage />
+
   return (
     <LargeLayout>
       {featuredAssets && featuredAssets.length > 0 && (

diff --git a/pages/notification.tsx b/pages/notification.tsx
@@ -7,6 +7,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useCookies } from 'react-cookie'
 import Empty from '../components/Empty/Empty'
 import Head from '../components/Head'
+import Loader from '../components/Loader'
 import NotificationDetail from '../components/Notification/Detail'
 import { concatToQuery } from '../concat'
 import { useGetNotificationsQuery } from '../graphql'
@@ -24,7 +25,11 @@ const NotificationPage: NextPage = ({}) => {
   const [_, setCookies] = useCookies()
   const [loading, setLoading] = useState(false)
 
-  const { data, fetchMore } = useGetNotificationsQuery({
+  const {
+    data,
+    fetchMore,
+    loading: fetching,
+  } = useGetNotificationsQuery({
     variables: {
       cursor: null,
       address: address || '',
@@ -65,6 +70,8 @@ const NotificationPage: NextPage = ({}) => {
     })
   }, [address, setCookies])
 
+  if (fetching) return <Loader fullPage />
+
   return (
     <SmallLayout>
       <Head title="Notifications" />

diff --git a/pages/tokens/[id]/bid.tsx b/pages/tokens/[id]/bid.tsx
@@ -17,6 +17,7 @@ import { useCallback, useMemo } from 'react'
 import Countdown from '../../../components/Countdown/Countdown'
 import Head from '../../../components/Head'
 import Image from '../../../components/Image/Image'
+import Loader from '../../../components/Loader'
 import BackButton from '../../../components/Navbar/BackButton'
 import OfferFormBid from '../../../components/Offer/Form/Bid'
 import Price from '../../../components/Price/Price'
@@ -51,7 +52,7 @@ const BidPage: NextPage<Props> = ({ now }) => {
   const assetId = useRequiredQueryParamSingle('id')
 
   const date = useMemo(() => new Date(now), [now])
-  const { data } = useBidOnAssetQuery({
+  const { data, loading } = useBidOnAssetQuery({
     variables: {
       id: assetId,
       now: date,
@@ -95,6 +96,7 @@ const BidPage: NextPage<Props> = ({ now }) => {
     await push(`/tokens/${assetId}`)
   }, [toast, t, push, assetId])
 
+  if (loading) return <Loader fullPage />
   if (!asset) return <></>
   return (
     <SmallLayout>

diff --git a/pages/tokens/[id]/index.tsx b/pages/tokens/[id]/index.tsx
@@ -39,6 +39,7 @@ import BidList from '../../../components/Bid/BidList'
 import Head from '../../../components/Head'
 import HistoryList from '../../../components/History/HistoryList'
 import ChakraLink from '../../../components/Link/Link'
+import Loader from '../../../components/Loader'
 import SaleDetail from '../../../components/Sales/Detail'
 import TokenMedia from '../../../components/Token/Media'
 import TokenMetadata from '../../../components/Token/Metadata'
@@ -83,7 +84,7 @@ const DetailPage: NextPage<Props> = ({ now: nowProp }) => {
   const assetId = useRequiredQueryParamSingle('id')
 
   const date = useMemo(() => new Date(nowProp), [nowProp])
-  const { data, refetch } = useFetchAssetQuery({
+  const { data, refetch, loading } = useFetchAssetQuery({
     variables: {
       id: assetId,
       now: date,
@@ -226,6 +227,7 @@ const DetailPage: NextPage<Props> = ({ now: nowProp }) => {
     [refetch, refreshAsset, toast],
   )
 
+  if (loading) return <Loader fullPage />
   if (!asset) return <></>
   return (
     <LargeLayout>
@@ -315,11 +317,11 @@ const DetailPage: NextPage<Props> = ({ now: nowProp }) => {
             <Stack spacing={1}>
               {asset.collection.name && (
                 <Heading as="p" variant="heading1" color="gray.500">
-                  <Link
+                  <ChakraLink
                     href={`/collection/${asset.collection.chainId}/${asset.collection.address}`}
                   >
                     {asset.collection.name}
-                  </Link>
+                  </ChakraLink>
                 </Heading>
               )}
               <Heading

diff --git a/pages/tokens/[id]/offer.tsx b/pages/tokens/[id]/offer.tsx
@@ -19,6 +19,7 @@ import useTranslation from 'next-translate/useTranslation'
 import { useRouter } from 'next/router'
 import { useCallback, useMemo, useState } from 'react'
 import Head from '../../../components/Head'
+import Loader from '../../../components/Loader'
 import BackButton from '../../../components/Navbar/BackButton'
 import Radio from '../../../components/Radio/Radio'
 import SalesAuctionForm from '../../../components/Sales/Auction/Form'
@@ -74,7 +75,7 @@ const OfferPage: NextPage<Props> = ({ now }) => {
   const assetId = useRequiredQueryParamSingle('id')
 
   const date = useMemo(() => new Date(now), [now])
-  const { data } = useOfferForAssetQuery({
+  const { data, loading } = useOfferForAssetQuery({
     variables: {
       id: assetId,
       now: date,
@@ -191,6 +192,7 @@ const OfferPage: NextPage<Props> = ({ now }) => {
     onCreated,
   ])
 
+  if (loading) return <Loader fullPage />
   if (!asset) return <></>
   return (
     <SmallLayout>

diff --git a/pages/users/[id]/bids/placed.tsx b/pages/users/[id]/bids/placed.tsx
@@ -27,6 +27,7 @@ import Empty from '../../../../components/Empty/Empty'
 import Head from '../../../../components/Head'
 import Image from '../../../../components/Image/Image'
 import Link from '../../../../components/Link/Link'
+import Loader from '../../../../components/Loader'
 import Pagination from '../../../../components/Pagination/Pagination'
 import Price from '../../../../components/Price/Price'
 import UserProfileTemplate from '../../../../components/Profile'
@@ -64,7 +65,7 @@ const BidPlacedPage: NextPage<Props> = ({ now }) => {
   const ownerLoggedIn = useIsLoggedIn(userAddress)
 
   const date = useMemo(() => new Date(now), [now])
-  const { data, refetch } = useFetchUserBidsPlacedQuery({
+  const { data, refetch, loading } = useFetchUserBidsPlacedQuery({
     variables: {
       address: userAddress,
       limit,
@@ -102,6 +103,7 @@ const BidPlacedPage: NextPage<Props> = ({ now }) => {
     },
     [replace, pathname, query],
   )
+  if (loading) return <Loader fullPage />
   return (
     <LargeLayout>
       <Head

diff --git a/pages/users/[id]/bids/received.tsx b/pages/users/[id]/bids/received.tsx
@@ -31,6 +31,7 @@ import Empty from '../../../../components/Empty/Empty'
 import Head from '../../../../components/Head'
 import Image from '../../../../components/Image/Image'
 import Link from '../../../../components/Link/Link'
+import Loader from '../../../../components/Loader'
 import Pagination from '../../../../components/Pagination/Pagination'
 import Price from '../../../../components/Price/Price'
 import UserProfileTemplate from '../../../../components/Profile'
@@ -68,7 +69,7 @@ const BidReceivedPage: NextPage<Props> = ({ now }) => {
   const ownerLoggedIn = useIsLoggedIn(userAddress)
 
   const date = useMemo(() => new Date(now), [now])
-  const { data, refetch } = useFetchUserBidsReceivedQuery({
+  const { data, refetch, loading } = useFetchUserBidsReceivedQuery({
     variables: {
       address: userAddress,
       limit,
@@ -107,6 +108,7 @@ const BidReceivedPage: NextPage<Props> = ({ now }) => {
     [replace, pathname, query],
   )
 
+  if (loading) return <Loader fullPage />
   return (
     <LargeLayout>
       <Head