add multi shimmer skeleton

gallery-so · Apr 24, 2024 · 53c958e · 53c958e
1 parent 510ec59
commit 53c958e
Show file tree

Hide file tree

Showing 5 changed files with 176 additions and 53 deletions.
diff --git a/apps/web/src/components/MultiShimmer/MultiShimmer.tsx b/apps/web/src/components/MultiShimmer/MultiShimmer.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import Skeleton from 'react-loading-skeleton';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  margin-bottom: 60px;
+  width: 100%;
+`;
+
+const ArtworksGridSkeleton = styled.div`
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 32px;
+  margin-top: 16px;
+`;
+
+const ArtworkGridItemSkeleton = styled(Skeleton)`
+  height: 300px;
+`;
+
+const SkeletoState = () => {
+  return (
+    <Wrapper>
+      <ArtworksGridSkeleton>
+        {[...Array(12)].map((_, index) => (
+          <ArtworkGridItemSkeleton key={index} />
+        ))}
+      </ArtworksGridSkeleton>
+    </Wrapper>
+  );
+};
+
+export function MultiShimmer() {
+  return <SkeletoState />;
+}
diff --git a/apps/web/src/components/Profile/ProfileScreenLoadingSkeleton.tsx b/apps/web/src/components/Profile/ProfileScreenLoadingSkeleton.tsx
@@ -42,7 +42,7 @@ const UsernameSocialsSkeleton = styled(Skeleton)`
 
 const ArtworksGridSkeleton = styled.div`
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   grid-gap: 16px;
   margin-top: 16px;
 `;
@@ -66,7 +66,7 @@ const UserGallerySkeleton = () => {
       <Wrapper>
         <TitleSkeleton />
         <ArtworksGridSkeleton>
-          {[...Array(6)].map((_, index) => (
+          {[...Array(12)].map((_, index) => (
             <ArtworkGridItemSkeleton key={index} />
           ))}
         </ArtworksGridSkeleton>

diff --git a/apps/web/src/contexts/shimmer/ShimmerContext.tsx b/apps/web/src/contexts/shimmer/ShimmerContext.tsx
@@ -1,6 +1,15 @@
-import { createContext, memo, ReactNode, useContext, useMemo, useState } from 'react';
+import {
+  createContext,
+  memo,
+  ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
 import styled from 'styled-components';
 
+import { MultiShimmer } from '~/components/MultiShimmer/MultiShimmer';
 import Shimmer from '~/components/Shimmer/Shimmer';
 
 type AspectRatio = 'wide' | 'square' | 'tall' | 'unknown';
@@ -23,7 +32,7 @@ export const useContentState = (): ShimmerState => {
 
 // TODO(Terence): Fix this later
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type ContentIsLoadedEvent = (event?: any) => void;
+export type ContentIsLoadedEvent = (event?: any, tokenId?: string) => void;
 
 type ShimmerAction = {
   setContentIsLoaded: ContentIsLoadedEvent;
@@ -40,13 +49,76 @@ export const useSetContentIsLoaded = (): ShimmerAction['setContentIsLoaded'] =>
   return context.setContentIsLoaded;
 };
 
+const MultiShimmerContext = createContext<
+  { markTokenAsLoaded: (tokenId: string) => void } | undefined
+>(undefined);
+
+export const useMultiShimmerProvider = () => {
+  const context = useContext(MultiShimmerContext);
+  if (!context) {
+    return null;
+  }
+  return context;
+};
+
+export const MultiShimmerProvider = ({
+  children,
+  tokenIdsToLoad,
+}: {
+  children: ReactNode;
+  tokenIdsToLoad: string[];
+}) => {
+  const [waitingForTokenIds, setWaitingForTokenIds] = useState(tokenIdsToLoad);
+
+  const markTokenAsLoaded = useCallback((tokenId: string) => {
+    setWaitingForTokenIds((prev) => prev.filter((id) => id !== tokenId));
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      markTokenAsLoaded,
+    }),
+    [markTokenAsLoaded]
+  );
+
+  type VisibleDivProps = {
+    isVisible: boolean;
+  };
+
+  const VisibleDiv = styled.div<VisibleDivProps>`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    visibility: ${({ isVisible }) => (isVisible ? 'visible' : 'hidden')};
+  `;
+
+  const isLoading = Boolean(waitingForTokenIds.length);
+
+  return (
+    <MultiShimmerContext.Provider value={value}>
+      {isLoading && (
+        <Container overflowHidden={isLoading}>
+          <VisibleDiv isVisible={isLoading}>
+            <MultiShimmer />
+          </VisibleDiv>
+        </Container>
+      )}
+      {children}
+    </MultiShimmerContext.Provider>
+  );
+};
+
 type Props = { children: ReactNode | ReactNode[] };
 
 const ShimmerProvider = memo(({ children }: Props) => {
   const [isLoaded, setIsLoaded] = useState(false);
   const [aspectRatio, setAspectRatio] = useState<null | number>(null);
   const [aspectRatioType, setAspectRatioType] = useState<null | AspectRatio>(null);
 
+  const multiShimmerContext = useMultiShimmerProvider();
+
   const state = useMemo(
     () => ({
       aspectRatio,
@@ -61,7 +133,7 @@ const ShimmerProvider = memo(({ children }: Props) => {
       // such as images, videos, and iframes, each of which come with different properties.
       // This is getting fixed in a followup PR
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      setContentIsLoaded: (event?: any) => {
+      setContentIsLoaded: (event?: any, tokenId?: string) => {
         if (event) {
           // default aspect ratio to 1; if we can't determine an asset's dimensions, we'll show it in a square viewport
           let aspectRatio = 1;
@@ -89,11 +161,13 @@ const ShimmerProvider = memo(({ children }: Props) => {
             setAspectRatioType('unknown');
           }
         }
-
+        if (tokenId) {
+          multiShimmerContext?.markTokenAsLoaded(tokenId);
+        }
         setIsLoaded(true);
       },
     }),
-    []
+    [multiShimmerContext]
   );
 
   return (

diff --git a/apps/web/src/hooks/useNftRetry.tsx b/apps/web/src/hooks/useNftRetry.tsx
@@ -30,7 +30,7 @@ export function useNftRetry({ tokenId }: useNftRetryArgs): useNftRetryResult {
 
   const handleNftLoaded = useCallback<ContentIsLoadedEvent>(
     (event) => {
-      shimmerContext?.setContentIsLoaded(event);
+      shimmerContext?.setContentIsLoaded(event, tokenId);
 
       markTokenAsLoaded(tokenId);
     },

diff --git a/apps/web/src/scenes/UserGalleryPage/UserGalleryCollections.tsx b/apps/web/src/scenes/UserGalleryPage/UserGalleryCollections.tsx
@@ -13,6 +13,7 @@ import styled from 'styled-components';
 
 import breakpoints from '~/components/core/breakpoints';
 import { DisplayLayout } from '~/components/core/enums';
+import { MultiShimmerProvider } from '~/contexts/shimmer/ShimmerContext';
 import { UserGalleryCollectionsFragment$key } from '~/generated/UserGalleryCollectionsFragment.graphql';
 import { UserGalleryCollectionsQueryFragment$key } from '~/generated/UserGalleryCollectionsQueryFragment.graphql';
 import useWindowSize from '~/hooks/useWindowSize';
@@ -58,6 +59,9 @@ function UserGalleryCollections({ galleryRef, queryRef, mobileLayout }: Props) {
           tokens {
             __typename
             id
+            token {
+              dbid
+            }
           }
           layout {
             sectionLayout {
@@ -71,6 +75,14 @@ function UserGalleryCollections({ galleryRef, queryRef, mobileLayout }: Props) {
     galleryRef
   );
 
+  const tokenIds = collections?.reduce((acc, collection) => {
+    const ids =
+      collection?.tokens
+        ?.map((token) => token?.token?.dbid)
+        .filter((id): id is string => id !== undefined) || [];
+    return acc.concat(ids);
+  }, [] as string[]);
+
   const isAuthenticatedUsersPage = loggedInUserId === owner?.id;
 
   const nonNullCollections = removeNullValues(collections);
@@ -147,58 +159,60 @@ function UserGalleryCollections({ galleryRef, queryRef, mobileLayout }: Props) {
   }
 
   return (
-    <StyledUserGalleryCollections>
-      <WindowScroller>
-        {({ height, registerChild, scrollTop, onChildScroll }) => (
-          <AutoSizer disableHeight>
-            {({ width }) => (
-              // @ts-expect-error shitty react-virtualized types
-              <div ref={registerChild}>
-                <List
-                  ref={listRef}
-                  autoHeight
-                  width={width}
-                  height={height}
-                  onScroll={onChildScroll}
-                  rowHeight={cache.rowHeight}
-                  rowCount={numCollectionsToDisplay}
-                  scrollTop={scrollTop}
-                  deferredMeasurementCache={cache}
-                  rowRenderer={rowRenderer}
-                  style={{
-                    outline: 'none',
-                    overflowX: 'visible',
-                    overflowY: 'visible',
-                  }}
-                  containerStyle={{ overflow: 'visible' }}
-                  overscanIndicesGetter={({
-                    cellCount,
-                    overscanCellsCount,
-                    startIndex,
-                    stopIndex,
-                  }) => ({
-                    overscanStartIndex: Math.max(0, startIndex - overscanCellsCount),
-                    overscanStopIndex: Math.min(cellCount - 1, stopIndex + overscanCellsCount),
-                  })}
-                />
-              </div>
-            )}
-          </AutoSizer>
-        )}
-      </WindowScroller>
-    </StyledUserGalleryCollections>
+    <MultiShimmerProvider tokenIdsToLoad={tokenIds ? tokenIds?.slice(0, 12) : []}>
+      <StyledUserGalleryCollections>
+        <WindowScroller>
+          {({ height, registerChild, scrollTop, onChildScroll }) => (
+            <AutoSizer disableHeight>
+              {({ width }) => (
+                // @ts-expect-error shitty react-virtualized types
+                <div ref={registerChild}>
+                  <List
+                    ref={listRef}
+                    autoHeight
+                    width={width}
+                    height={height}
+                    onScroll={onChildScroll}
+                    rowHeight={cache.rowHeight}
+                    rowCount={numCollectionsToDisplay}
+                    scrollTop={scrollTop}
+                    deferredMeasurementCache={cache}
+                    rowRenderer={rowRenderer}
+                    style={{
+                      outline: 'none',
+                      overflowX: 'visible',
+                      overflowY: 'visible',
+                    }}
+                    containerStyle={{ overflow: 'visible' }}
+                    overscanIndicesGetter={({
+                      cellCount,
+                      overscanCellsCount,
+                      startIndex,
+                      stopIndex,
+                    }) => ({
+                      overscanStartIndex: Math.max(0, startIndex - overscanCellsCount),
+                      overscanStopIndex: Math.min(cellCount - 1, stopIndex + overscanCellsCount),
+                    })}
+                  />
+                </div>
+              )}
+            </AutoSizer>
+          )}
+        </WindowScroller>
+      </StyledUserGalleryCollections>
+    </MultiShimmerProvider>
   );
 }
 
 const StyledUserGalleryCollections = styled.div`
-  width: 100%;
+      width: 100%;
 
-  padding-top: 16px;
+      padding-top: 16px;
 
-  @media only screen and ${breakpoints.tablet} {
-    padding-top: 24px;
+      @media only screen and ${breakpoints.tablet} {
+        padding-top: 24px;
   }
-`;
+      `;
 
 const StyledUserGalleryCollectionContainer = styled.div`
   padding-bottom: 48px;