improve multishimmer context and mobile skeleton

apps/web/src/components/MultiShimmer/MultiShimmer.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import Skeleton from 'react-loading-skeleton';
 import styled from 'styled-components';
 
+import { size } from '../core/breakpoints';
+
 const Wrapper = styled.div`
   margin-bottom: 60px;
   width: 100%;
@@ -10,8 +12,13 @@ const Wrapper = styled.div`
 const ArtworksGridSkeleton = styled.div`
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  grid-gap: 32px;
+  grid-gap: 16px;
   margin-top: 16px;
+
+  @media (max-width: ${size.tablet}px) {
+    // Adjusts to a mobile viewport
+    grid-template-columns: repeat(1, 1fr);
+  }
 `;
 
 const ArtworkGridItemSkeleton = styled(Skeleton)`

apps/web/src/components/Profile/ProfileScreenLoadingSkeleton.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 
 import { GalleryPageSpacing } from '~/pages/[username]';
 
+import { size } from '../core/breakpoints';
 import { VStack } from '../core/Spacer/Stack';
 
 const GallerySkeletonWrapper = styled.div`
@@ -13,6 +14,7 @@ const GallerySkeletonWrapper = styled.div`
 
 const Wrapper = styled.div`
   padding-left: 20px;
+  padding-right: 20px;
   margin-bottom: 60px;
 `;
 
@@ -42,9 +44,14 @@ const UsernameSocialsSkeleton = styled(Skeleton)`
 
 const ArtworksGridSkeleton = styled.div`
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(4, 1fr); // default to 4 items per row
   grid-gap: 16px;
   margin-top: 16px;
+
+  @media (max-width: ${size.tablet}px) {
+    // Adjusts to a mobile viewport
+    grid-template-columns: repeat(1, 1fr); // 1 item per row on mobile
+  }
 `;
 
 const ArtworkGridItemSkeleton = styled(Skeleton)`

apps/web/src/contexts/shimmer/ShimmerContext.tsx

@@ -1,4 +1,13 @@
-import { createContext, memo, ReactNode, useCallback, useContext, useMemo, useState } from 'react';
+import {
+  createContext,
+  memo,
+  PropsWithChildren,
+  ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
 import styled from 'styled-components';
 
 import { MultiShimmer } from '~/components/MultiShimmer/MultiShimmer';
@@ -53,13 +62,17 @@ export const useMultiShimmerProvider = () => {
   return context;
 };
 
-export const MultiShimmerProvider = ({
-  children,
-  tokenIdsToLoad,
-}: {
-  children: ReactNode;
+/*
+    MultiShimmerProvider is used to show a skeleton loader for group of tokens and stop showing it
+    when X tokens were done loaded. For example, in profile screen we'll show it while the first 12
+    tokens are loading, after they're finished loading we'll show the actual tokens.
+*/
+
+type MultiShimmerProviderProps = PropsWithChildren<{
   tokenIdsToLoad: string[];
-}) => {
+}>;
+
+export const MultiShimmerProvider = ({ children, tokenIdsToLoad }: MultiShimmerProviderProps) => {
   const [waitingForTokenIds, setWaitingForTokenIds] = useState(tokenIdsToLoad);
 
   const markTokenAsLoaded = useCallback((tokenId: string) => {
@@ -73,19 +86,6 @@ export const MultiShimmerProvider = ({
     [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 (
@@ -212,4 +212,17 @@ const StyledChildren = styled.div<VisibleProps>`
   opacity: ${({ visible }) => (visible ? 1 : 0)};
 `;
 
+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')};
+`;
+
 export default ShimmerProvider;

apps/web/src/scenes/UserGalleryPage/UserGalleryCollections.tsx

@@ -75,13 +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 tokenIds = useMemo(() => {
+    return collections?.reduce<string[]>((acc, collection) => {
+      const ids = collection?.tokens?.map((token) => token?.token?.dbid) || [];
+      const nonNullIds = removeNullValues(ids);
+
+      return [...acc, ...nonNullIds];
+    }, []);
+  }, [collections]);
 
   const isAuthenticatedUsersPage = loggedInUserId === owner?.id;