From 85ad52e3981d00ec487e1bb5fc27819f63c2f8c4 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Thu, 2 Jan 2025 20:20:40 +0000
Subject: [PATCH] Add loading state to new trending interstitial (#7332)

---
 src/components/interstitials/Trending.tsx | 28 ++++++++++++++++++++++-
 src/view/com/util/LoadingPlaceholder.tsx  |  2 +-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/components/interstitials/Trending.tsx b/src/components/interstitials/Trending.tsx
index a217a7da2d..9a5feb2b66 100644
--- a/src/components/interstitials/Trending.tsx
+++ b/src/components/interstitials/Trending.tsx
@@ -11,6 +11,7 @@ import {
 } from '#/state/preferences/trending'
 import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
 import {useTrendingConfig} from '#/state/trending-config'
+import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {atoms as a, useGutters, useTheme} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
@@ -50,7 +51,32 @@ export function Inner() {
             <Graph size="sm" />
           </View>
           {isLoading ? (
-            <View style={[a.py_lg]}>
+            <View style={[a.py_lg, a.flex_row, a.gap_lg, a.align_center]}>
+              <LoadingPlaceholder
+                width={80}
+                height={undefined}
+                style={{alignSelf: 'stretch'}}
+              />
+              <LoadingPlaceholder
+                width={50}
+                height={undefined}
+                style={{alignSelf: 'stretch'}}
+              />
+              <LoadingPlaceholder
+                width={120}
+                height={undefined}
+                style={{alignSelf: 'stretch'}}
+              />
+              <LoadingPlaceholder
+                width={30}
+                height={undefined}
+                style={{alignSelf: 'stretch'}}
+              />
+              <LoadingPlaceholder
+                width={180}
+                height={undefined}
+                style={{alignSelf: 'stretch'}}
+              />
               <Text
                 style={[t.atoms.text_contrast_medium, a.text_sm, a.font_bold]}>
                 {' '}
diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx
index 25ce460d4b..b4a5681d8e 100644
--- a/src/view/com/util/LoadingPlaceholder.tsx
+++ b/src/view/com/util/LoadingPlaceholder.tsx
@@ -23,7 +23,7 @@ export function LoadingPlaceholder({
   style,
 }: {
   width: DimensionValue
-  height: DimensionValue
+  height: DimensionValue | undefined
   style?: StyleProp<ViewStyle>
 }) {
   const theme = useTheme()