feat: new loading state for nfts (#4329)

src/components/v2v3/V2V3Project/ProjectDashboard/components/NftRewardsPanel/NftReward/NftReward.tsx

@@ -137,3 +137,18 @@ export function NftReward({
     </>
   )
 }
+
+export const NftRewardSkeleton = () => (
+  <div
+    className={twMerge(
+      'flex h-full w-40 animate-pulse select-none flex-col rounded-[10px] bg-grey-100 dark:bg-slate-600 md:w-[252px]',
+      'shadow-[0_4px_14px_rgba(0,0,0,0.0392156862745098)]', // box-shadow: 0px 4px 14px 0px #0000000A
+    )}
+  >
+    <div className="flex h-40 w-full items-center justify-center rounded-t-lg bg-grey-200 dark:bg-slate-500 md:h-60" />
+    <div className="flex w-full flex-col justify-between rounded-b-lg p-4">
+      <div className="h-4 w-2/3 rounded-full bg-grey-200 dark:bg-slate-500" />
+      <div className="mt-3 h-4 w-1/3 rounded-full bg-grey-200 dark:bg-slate-500" />
+    </div>
+  </div>
+)

src/components/v2v3/V2V3Project/ProjectDashboard/components/NftRewardsPanel/NftRewardsPanel.tsx

@@ -1,6 +1,6 @@
 import { Trans, t } from '@lingui/macro'
 import { EmptyScreen } from '../EmptyScreen'
-import { NftReward } from './NftReward/NftReward'
+import { NftReward, NftRewardSkeleton } from './NftReward/NftReward'
 import { RedeemNftsSection } from './RedeemNftsSection/RedeemNftsSection'
 import { useNftRewardsPanel } from './hooks/useNftRewardsPanel'
 
@@ -33,6 +33,12 @@ export const NftRewardsPanel = () => {
             </div>
           ))}
         </div>
+      ) : nftsLoading ? (
+        <div className="grid grid-cols-2 gap-4 md:grid-cols-3 md:gap-6">
+          {[...Array(6)].map((_, i) => (
+            <NftRewardSkeleton key={i} />
+          ))}
+        </div>
       ) : (
         <EmptyScreen subtitle={t`This project has no NFTs`} />
       )}

src/contexts/NftRewards/NftRewardsProvider.tsx

@@ -7,7 +7,7 @@ import { useNftCollectionPricingContext } from 'hooks/JB721Delegate/contractRead
 import { useNftFlagsOf } from 'hooks/JB721Delegate/contractReader/useNftFlagsOf'
 import { useNftTiers } from 'hooks/JB721Delegate/contractReader/useNftTiers'
 import { JB721GovernanceType } from 'models/nftRewards'
-import { useContext, useMemo } from 'react'
+import { useContext, useEffect, useMemo, useState } from 'react'
 import {
   DEFAULT_NFT_FLAGS,
   DEFAULT_NFT_PRICING,
@@ -25,6 +25,8 @@ export const NftRewardsProvider: React.FC<React.PropsWithChildren<unknown>> = ({
     JB721DelegateContractsContext,
   )
 
+  const [firstLoad, setFirstLoad] = useState(true)
+
   const dataSourceAddress = fundingCycleMetadata?.dataSource
 
   // don't fetch stuff if there's no datasource in the first place.
@@ -47,8 +49,6 @@ export const NftRewardsProvider: React.FC<React.PropsWithChildren<unknown>> = ({
   const { data: loadedRewardTiers, isLoading: nftRewardTiersLoading } =
     useNftRewards(tierData, projectId, dataSourceAddress)
 
-  // Roman storm specific stuff, cached data
-
   const rewardTiers = useMemo(() => {
     return loadedRewardTiers
   }, [loadedRewardTiers])
@@ -57,9 +57,16 @@ export const NftRewardsProvider: React.FC<React.PropsWithChildren<unknown>> = ({
     return loadedCIDs
   }, [loadedCIDs])
 
+  useEffect(() => {
+    // First load is always true until either nftRewardTiersLoading or nftRewardsCIDsLoading is true
+    if (firstLoad && (nftRewardTiersLoading || nftRewardsCIDsLoading)) {
+      setFirstLoad(false)
+    }
+  }, [firstLoad, nftRewardTiersLoading, nftRewardsCIDsLoading])
+
   const nftsLoading = useMemo(() => {
-    return Boolean(nftRewardTiersLoading || nftRewardsCIDsLoading)
-  }, [nftRewardTiersLoading, nftRewardsCIDsLoading])
+    return Boolean(firstLoad || nftRewardTiersLoading || nftRewardsCIDsLoading)
+  }, [firstLoad, nftRewardTiersLoading, nftRewardsCIDsLoading])
 
   // fetch some other related stuff
   const { data: collectionMetadataUri } =