feat: Details loading (#5162)

* Merging in details loading state

src/nft/components/collection/FilterButton.tsx

@@ -3,7 +3,6 @@ import { Box } from 'nft/components/Box'
 import * as styles from 'nft/components/collection/FilterButton.css'
 import { FilterIcon } from 'nft/components/icons'
 import { buttonTextMedium } from 'nft/css/common.css'
-import { useIsCollectionLoading } from 'nft/hooks'
 import { pluralize, putCommas } from 'nft/utils'
 
 export const FilterButton = ({
@@ -17,15 +16,9 @@ export const FilterButton = ({
   onClick: () => void
   collectionCount?: number
 }) => {
-  const isCollectionNftsLoading = useIsCollectionLoading((state) => state.isCollectionNftsLoading)
-
   return (
     <Box
-      className={
-        isCollectionNftsLoading
-          ? styles.filterButtonLoading
-          : clsx(styles.filterButton, !isFiltersExpanded && styles.filterButtonExpanded)
-      }
+      className={clsx(styles.filterButton, !isFiltersExpanded && styles.filterButtonExpanded)}
       display="flex"
       gap="8"
       borderRadius="12"

src/nft/components/details/AssetDetailsLoading.tsx

+import Column from 'components/Column'
+import Loader from 'components/Loader'
+import { LoadingBubble } from 'components/Tokens/loading'
+import { ScreenBreakpointsPaddings } from 'nft/pages/collection/index.css'
+import styled, { useTheme } from 'styled-components/macro'
+
+const BREAKPOINT = '960px'
+
+const Title = styled(LoadingBubble)`
+  height: 16px;
+  width: 136px;
+`
+
+const SubTitle = styled(LoadingBubble)`
+  height: 40px;
+  width: 200px;
+  margin-top: 12px;
+`
+
+const PrimaryBody = styled(LoadingBubble)`
+  width: 100%;
+  height: 260px;
+`
+
+const PrimaryContent = styled(Column)`
+  max-width: 780px;
+  margin-top: 28px;
+  width: 100%;
+
+  @media (max-width: ${BREAKPOINT}) {
+    max-width: 100%;
+  }
+`
+
+const SecondaryContent = styled(LoadingBubble)`
+  width: 100%;
+  height: 60px;
+  margin-top: 28px;
+`
+
+const LoaderContainer = styled.div`
+  width: 100%;
+  padding-top: 200px;
+  padding-bottom: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: pink;
+`
+
+const BuyNowContainer = styled(LoadingBubble)`
+  height: 180px;
+  width: 360px;
+  margin-top: 28px;
+
+  @media (max-width: ${BREAKPOINT}) {
+    width: 100%;
+  }
+`
+
+const PriceContainer = styled(LoadingBubble)`
+  height: 16px;
+  width: 136px;
+
+  @media (max-width: ${BREAKPOINT}) {
+    margin-top: 20px;
+  }
+`
+
+const LoadingContainer = styled.div`
+  display: flex;
+  margin-top: 48px;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1296px;
+
+  ${ScreenBreakpointsPaddings}
+
+  @media (max-width: ${BREAKPOINT}) {
+    max-width: 100%;
+    margin-top: 0;
+  }
+`
+
+const StyledColumn = styled(Column)`
+  max-width: 780px;
+  width: 100%;
+
+  @media (max-width: ${BREAKPOINT}) {
+    max-width: 100%;
+  }
+`
+
+const BuyNowLoadingDesktop = styled.div`
+  padding-left: 60px;
+
+  @media (max-width: ${BREAKPOINT}) {
+    display: none;
+  }
+`
+
+const BuyNowLoadingMobile = styled.div`
+  display: none;
+  margin-top: 16px;
+
+  @media (max-width: ${BREAKPOINT}) {
+    display: block;
+  }
+`
+
+const BuyNowLoading = () => (
+  <>
+    <PriceContainer />
+    <BuyNowContainer />
+  </>
+)
+
+export const AssetDetailsLoading = () => {
+  const theme = useTheme()
+
+  return (
+    <LoadingContainer>
+      <StyledColumn>
+        <LoaderContainer>
+          <Loader stroke={theme.accentAction} size="40px" />
+        </LoaderContainer>
+        <Title />
+        <SubTitle />
+        <BuyNowLoadingMobile>
+          <BuyNowLoading />
+        </BuyNowLoadingMobile>
+        <PrimaryContent>
+          <PrimaryBody />
+          <SecondaryContent />
+          <SecondaryContent />
+          <SecondaryContent />
+        </PrimaryContent>
+      </StyledColumn>
+      <BuyNowLoadingDesktop>
+        <BuyNowLoading />
+      </BuyNowLoadingDesktop>
+    </LoadingContainer>
+  )
+}

src/nft/pages/asset/Asset.tsx

@@ -28,7 +28,6 @@ const AssetContainer = styled.div`
 const AssetPriceDetailsContainer = styled.div`
   min-width: 360px;
   position: relative;
-  padding-right: 100px;
 
   @media (max-width: 960px) {
     display: none;
@@ -55,9 +54,7 @@ const Asset = () => {
               <AssetPriceDetails collection={collection} asset={asset} />
             </AssetPriceDetailsContainer>
           </AssetContainer>
-        ) : (
-          <div>Holder for loading ...</div>
-        )}
+        ) : null}
       </Trace>
     </>
   )

src/pages/App.tsx

@@ -6,6 +6,7 @@ import { useFeatureFlagsIsLoaded } from 'featureFlags'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader'
 import { CollectionPageSkeleton } from 'nft/components/collection/CollectionPageSkeleton'
+import { AssetDetailsLoading } from 'nft/components/details/AssetDetailsLoading'
 import { ProfilePageLoadingSkeleton } from 'nft/components/profile/view/ProfilePageLoadingSkeleton'
 import { lazy, Suspense, useEffect, useState } from 'react'
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
@@ -239,7 +240,7 @@ export default function App() {
                       <Route
                         path="/nfts/asset/:contractAddress/:tokenId"
                         element={
-                          <Suspense fallback={<div>Holder for loading ...</div>}>
+                          <Suspense fallback={<AssetDetailsLoading />}>
                             <Asset />
                           </Suspense>
                         }