quilling.dev
An ATproto social media client -- with an independent Appview.
Add loading state to new trending interstitial (#7332)
authored by
GitHub
85ad52e3
3e0ed3b8
+27
-1
src/components/interstitials/Trending.tsx
+27
-1
src/components/interstitials/Trending.tsx
···
11
11
} from '#/state/preferences/trending'
12
12
import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
13
13
import {useTrendingConfig} from '#/state/trending-config'
14
+
import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
14
15
import {atoms as a, useGutters, useTheme} from '#/alf'
15
16
import {Button, ButtonIcon} from '#/components/Button'
16
17
import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
···
50
51
<Graph size="sm" />
51
52
</View>
52
53
{isLoading ? (
53
-
<View style={[a.py_lg]}>
54
+
<View style={[a.py_lg, a.flex_row, a.gap_lg, a.align_center]}>
55
+
<LoadingPlaceholder
56
+
width={80}
57
+
height={undefined}
58
+
style={{alignSelf: 'stretch'}}
59
+
/>
60
+
<LoadingPlaceholder
61
+
width={50}
62
+
height={undefined}
63
+
style={{alignSelf: 'stretch'}}
64
+
/>
65
+
<LoadingPlaceholder
66
+
width={120}
67
+
height={undefined}
68
+
style={{alignSelf: 'stretch'}}
69
+
/>
70
+
<LoadingPlaceholder
71
+
width={30}
72
+
height={undefined}
73
+
style={{alignSelf: 'stretch'}}
74
+
/>
75
+
<LoadingPlaceholder
76
+
width={180}
77
+
height={undefined}
78
+
style={{alignSelf: 'stretch'}}
79
+
/>
54
80
<Text
55
81
style={[t.atoms.text_contrast_medium, a.text_sm, a.font_bold]}>
56
82
{' '}