From c2733bc2c00d0a4cc79e3dc9436ae5950cc2ff61 Mon Sep 17 00:00:00 2001 From: dan Date: Wed, 24 Jan 2024 23:01:22 +0000 Subject: [PATCH] Use consistent spinners for loading screens (#2611) * Use consistent spinners for loading screens * Consolidate into LoadingScreen --- src/view/com/post-thread/PostLikedBy.tsx | 7 ++----- src/view/com/post-thread/PostRepostedBy.tsx | 7 ++----- src/view/com/post-thread/PostThread.tsx | 9 ++------- src/view/com/profile/ProfileFollowers.tsx | 7 ++----- src/view/com/profile/ProfileFollows.tsx | 7 ++----- src/view/com/util/LoadingScreen.tsx | 14 ++++++++++++++ src/view/screens/ProfileFeed.tsx | 17 ++++------------- src/view/screens/ProfileList.tsx | 9 +++------ 8 files changed, 31 insertions(+), 46 deletions(-) create mode 100644 src/view/com/util/LoadingScreen.tsx diff --git a/src/view/com/post-thread/PostLikedBy.tsx b/src/view/com/post-thread/PostLikedBy.tsx index 6e013f61..58208916 100644 --- a/src/view/com/post-thread/PostLikedBy.tsx +++ b/src/view/com/post-thread/PostLikedBy.tsx @@ -6,6 +6,7 @@ import {List} from '../util/List' import {ErrorMessage} from '../util/error/ErrorMessage' import {ProfileCardWithFollowBtn} from '../profile/ProfileCard' import {logger} from '#/logger' +import {LoadingScreen} from '../util/LoadingScreen' import {useResolveUriQuery} from '#/state/queries/resolve-uri' import {usePostLikedByQuery} from '#/state/queries/post-liked-by' import {cleanError} from '#/lib/strings/errors' @@ -60,11 +61,7 @@ export function PostLikedBy({uri}: {uri: string}) { }, []) if (isFetchingResolvedUri || !isFetched) { - return ( - - - - ) + return } // error diff --git a/src/view/com/post-thread/PostRepostedBy.tsx b/src/view/com/post-thread/PostRepostedBy.tsx index a2d3be55..7bbd8aa6 100644 --- a/src/view/com/post-thread/PostRepostedBy.tsx +++ b/src/view/com/post-thread/PostRepostedBy.tsx @@ -6,6 +6,7 @@ import {List} from '../util/List' import {ProfileCardWithFollowBtn} from '../profile/ProfileCard' import {ErrorMessage} from '../util/error/ErrorMessage' import {logger} from '#/logger' +import {LoadingScreen} from '../util/LoadingScreen' import {useResolveUriQuery} from '#/state/queries/resolve-uri' import {usePostRepostedByQuery} from '#/state/queries/post-reposted-by' import {cleanError} from '#/lib/strings/errors' @@ -61,11 +62,7 @@ export function PostRepostedBy({uri}: {uri: string}) { ) if (isFetchingResolvedUri || !isFetched) { - return ( - - - - ) + return } // error diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx index 072ef7e3..8d2a4ac9 100644 --- a/src/view/com/post-thread/PostThread.tsx +++ b/src/view/com/post-thread/PostThread.tsx @@ -8,6 +8,7 @@ import { } from 'react-native' import {AppBskyFeedDefs} from '@atproto/api' import {CenteredView} from '../util/Views' +import {LoadingScreen} from '../util/LoadingScreen' import {List, ListMethods} from '../util/List' import { FontAwesomeIcon, @@ -125,13 +126,7 @@ export function PostThread({ return } if (!thread || isLoading || !preferences) { - return ( - - - - - - ) + return } return ( - - - ) + return } // error diff --git a/src/view/com/profile/ProfileFollows.tsx b/src/view/com/profile/ProfileFollows.tsx index 091922dd..bd4af108 100644 --- a/src/view/com/profile/ProfileFollows.tsx +++ b/src/view/com/profile/ProfileFollows.tsx @@ -2,6 +2,7 @@ import React from 'react' import {ActivityIndicator, StyleSheet, View} from 'react-native' import {AppBskyActorDefs as ActorDefs} from '@atproto/api' import {CenteredView} from '../util/Views' +import {LoadingScreen} from '../util/LoadingScreen' import {List} from '../util/List' import {ErrorMessage} from '../util/error/ErrorMessage' import {ProfileCardWithFollowBtn} from './ProfileCard' @@ -62,11 +63,7 @@ export function ProfileFollows({name}: {name: string}) { ) if (isFetchingDid || !isFetched) { - return ( - - - - ) + return } // error diff --git a/src/view/com/util/LoadingScreen.tsx b/src/view/com/util/LoadingScreen.tsx new file mode 100644 index 00000000..93c3bee4 --- /dev/null +++ b/src/view/com/util/LoadingScreen.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import {ActivityIndicator, View} from 'react-native' +import {s} from 'lib/styles' +import {CenteredView} from './Views' + +export function LoadingScreen() { + return ( + + + + + + ) +} diff --git a/src/view/screens/ProfileFeed.tsx b/src/view/screens/ProfileFeed.tsx index 61282497..a968ac00 100644 --- a/src/view/screens/ProfileFeed.tsx +++ b/src/view/screens/ProfileFeed.tsx @@ -1,5 +1,5 @@ import React, {useMemo, useCallback} from 'react' -import {Dimensions, StyleSheet, View, ActivityIndicator} from 'react-native' +import {Dimensions, StyleSheet, View} from 'react-native' import {NativeStackScreenProps} from '@react-navigation/native-stack' import {useIsFocused, useNavigation} from '@react-navigation/native' import {useQueryClient} from '@tanstack/react-query' @@ -21,6 +21,7 @@ import {RichText} from 'view/com/util/text/RichText' import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn' import {FAB} from 'view/com/util/fab/FAB' import {EmptyState} from 'view/com/util/EmptyState' +import {LoadingScreen} from 'view/com/util/LoadingScreen' import * as Toast from 'view/com/util/Toast' import {useSetTitle} from 'lib/hooks/useSetTitle' import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed' @@ -118,11 +119,7 @@ export function ProfileFeedScreen(props: Props) { return resolvedUri ? ( ) : ( - - - - - + ) } @@ -131,13 +128,7 @@ function ProfileFeedScreenIntermediate({feedUri}: {feedUri: string}) { const {data: info} = useFeedSourceInfoQuery({uri: feedUri}) if (!preferences || !info) { - return ( - - - - - - ) + return } return ( diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx index cb7962a9..f41cfa0b 100644 --- a/src/view/screens/ProfileList.tsx +++ b/src/view/screens/ProfileList.tsx @@ -1,5 +1,5 @@ import React, {useCallback, useMemo} from 'react' -import {ActivityIndicator, Pressable, StyleSheet, View} from 'react-native' +import {Pressable, StyleSheet, View} from 'react-native' import {useFocusEffect, useIsFocused} from '@react-navigation/native' import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {useNavigation} from '@react-navigation/native' @@ -13,6 +13,7 @@ import {Text} from 'view/com/util/text/Text' import {NativeDropdown, DropdownItem} from 'view/com/util/forms/NativeDropdown' import {CenteredView} from 'view/com/util/Views' import {EmptyState} from 'view/com/util/EmptyState' +import {LoadingScreen} from 'view/com/util/LoadingScreen' import {RichText} from 'view/com/util/text/RichText' import {Button} from 'view/com/util/forms/Button' import {TextLink} from 'view/com/util/Link' @@ -97,11 +98,7 @@ export function ProfileListScreen(props: Props) { return resolvedUri && list ? ( ) : ( - - - - - + ) }