diff options
| author | dan <dan.abramov@gmail.com> | 2025-01-02 20:20:40 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-01-02 20:20:40 +0000 |
| commit | 85ad52e3981d00ec487e1bb5fc27819f63c2f8c4 (patch) | |
| tree | 60dc883bbad75fda23afd5e336b15c8645d937bb | |
| parent | 3e0ed3b834699d44277461ca75327cd3e5c1cf70 (diff) | |
| download | voidsky-85ad52e3981d00ec487e1bb5fc27819f63c2f8c4.tar.zst | |
Add loading state to new trending interstitial (#7332)
| -rw-r--r-- | src/components/interstitials/Trending.tsx | 28 | ||||
| -rw-r--r-- | 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 a217a7da2..9a5feb2b6 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 25ce460d4..b4a5681d8 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() |