Load state

src/screens/Search/Explore.tsx

@@ -24,7 +24,10 @@ import {
   FeedFeedLoadingPlaceholder,
   ProfileCardFeedLoadingPlaceholder,
 } from '#/view/com/util/LoadingPlaceholder'
-import {StarterPackCard} from '#/screens/Search/components/StarterPackCard'
+import {
+  StarterPackCard,
+  StarterPackCardSkeleton,
+} from '#/screens/Search/components/StarterPackCard'
 import {ExploreRecommendations} from '#/screens/Search/modules/ExploreRecommendations'
 import {ExploreTrendingTopics} from '#/screens/Search/modules/ExploreTrendingTopics'
 import {ExploreTrendingVideos} from '#/screens/Search/modules/ExploreTrendingVideos'
@@ -164,6 +167,10 @@ type ExploreScreenItems =
       key: string
       view: AppBskyGraphDefs.StarterPackView
     }
+  | {
+      type: 'starterPackSkeleton'
+      key: string
+    }
 
 export function Explore({
   focusSearchInput,
@@ -459,6 +466,12 @@ export function Explore({
       })
 
       if (isLoadingSuggestedSPs) {
+        Array.from({length: 3}).forEach((_, index) =>
+          i.push({
+            type: 'starterPackSkeleton',
+            key: `starterPackSkeleton-${index}`,
+          }),
+        )
         // nothing
       } else if (suggestedSPsError || !suggestedSPs) {
         i.pop()
@@ -600,11 +613,18 @@ export function Explore({
         }
         case 'starterPack': {
           return (
-            <View style={[a.px_lg, a.py_sm]}>
+            <View style={[a.px_lg, a.pb_lg]}>
               <StarterPackCard view={item.view} />
             </View>
           )
         }
+        case 'starterPackSkeleton': {
+          return (
+            <View style={[a.px_lg, a.pb_lg]}>
+              <StarterPackCardSkeleton />
+            </View>
+          )
+        }
         case 'loadMore': {
           return (
             <View style={[a.border_t, t.atoms.border_contrast_low]}>

src/screens/Search/components/StarterPackCard.tsx

@@ -5,16 +5,17 @@ import {
   AppBskyGraphStarterpack,
   moderateProfile,
 } from '@atproto/api'
-import {msg,Trans} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useSession} from '#/state/session'
+import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {ButtonText} from '#/components/Button'
-import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
+import {PlusSmall_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import {Link} from '#/components/Link'
 import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import {useStarterPackLink} from '#/components/StarterPack/StarterPackCard'
@@ -94,7 +95,7 @@ export function StarterPackCard({
           </Text>
           <Text
             emoji
-            style={[a.leading_snug, t.atoms.text_contrast_medium]}
+            style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}
             numberOfLines={1}>
             {view.creator?.did === currentAccount?.did
               ? _(msg`By you`)
@@ -251,3 +252,44 @@ export function AvatarStack({
     </View>
   )
 }
+
+export function StarterPackCardSkeleton() {
+  const t = useTheme()
+  const {gtPhone} = useBreakpoints()
+
+  const profileCount = gtPhone ? 11 : 8
+
+  return (
+    <View
+      style={[
+        a.w_full,
+        a.p_lg,
+        a.gap_md,
+        a.border,
+        a.rounded_sm,
+        a.overflow_hidden,
+        t.atoms.border_contrast_low,
+      ]}>
+      <AvatarStack profiles={[]} numPending={profileCount} />
+
+      <View
+        style={[
+          a.w_full,
+          a.flex_row,
+          a.align_start,
+          a.gap_lg,
+          web({
+            position: 'static',
+            zIndex: 'unset',
+          }),
+        ]}>
+        <View style={[a.flex_1, a.gap_xs]}>
+          <LoadingPlaceholder width={180} height={18} />
+          <LoadingPlaceholder width={120} height={14} />
+        </View>
+
+        <LoadingPlaceholder width={100} height={33} />
+      </View>
+    </View>
+  )
+}