handle each possible loading state (#4617)
parent
f64245c1fb
commit
e0ac7d5bdc
|
@ -32,12 +32,17 @@ export function StepFeeds({moderationOpts}: {moderationOpts: ModerationOpts}) {
|
|||
const throttledQuery = useThrottledValue(query, 500)
|
||||
const {screenReaderEnabled} = useA11y()
|
||||
|
||||
const {data: savedFeedsAndLists} = useSavedFeeds()
|
||||
const {data: savedFeedsAndLists, isLoading: isLoadingSavedFeeds} =
|
||||
useSavedFeeds()
|
||||
const savedFeeds = savedFeedsAndLists?.feeds
|
||||
.filter(f => f.type === 'feed' && f.view.uri !== DISCOVER_FEED_URI)
|
||||
.map(f => f.view) as AppBskyFeedDefs.GeneratorView[]
|
||||
|
||||
const {data: popularFeedsPages, fetchNextPage} = useGetPopularFeedsQuery({
|
||||
const {
|
||||
data: popularFeedsPages,
|
||||
fetchNextPage,
|
||||
isLoading: isLoadingPopularFeeds,
|
||||
} = useGetPopularFeedsQuery({
|
||||
limit: 30,
|
||||
})
|
||||
const popularFeeds = popularFeedsPages?.pages.flatMap(p => p.feeds) ?? []
|
||||
|
@ -45,9 +50,12 @@ export function StepFeeds({moderationOpts}: {moderationOpts: ModerationOpts}) {
|
|||
popularFeeds.filter(f => !savedFeeds.some(sf => sf.uri === f.uri)),
|
||||
)
|
||||
|
||||
const {data: searchedFeeds, isLoading: isLoadingSearch} =
|
||||
const {data: searchedFeeds, isFetching: isFetchingSearchedFeeds} =
|
||||
useSearchPopularFeedsQuery({q: throttledQuery})
|
||||
|
||||
const isLoading =
|
||||
isLoadingSavedFeeds || isLoadingPopularFeeds || isFetchingSearchedFeeds
|
||||
|
||||
const renderItem = ({
|
||||
item,
|
||||
}: ListRenderItemInfo<AppBskyFeedDefs.GeneratorView>) => {
|
||||
|
@ -90,7 +98,7 @@ export function StepFeeds({moderationOpts}: {moderationOpts: ModerationOpts}) {
|
|||
style={{flex: 1}}
|
||||
ListEmptyComponent={
|
||||
<View style={[a.flex_1, a.align_center, a.mt_lg, a.px_lg]}>
|
||||
{isLoadingSearch ? (
|
||||
{isLoading ? (
|
||||
<Loader size="lg" />
|
||||
) : (
|
||||
<Text
|
||||
|
|
|
@ -31,14 +31,20 @@ export function StepProfiles({
|
|||
const [query, setQuery] = useState('')
|
||||
const {screenReaderEnabled} = useA11y()
|
||||
|
||||
const {data: topPages, fetchNextPage} = useActorSearchPaginated({
|
||||
const {
|
||||
data: topPages,
|
||||
fetchNextPage,
|
||||
isLoading: isLoadingTopPages,
|
||||
} = useActorSearchPaginated({
|
||||
query: encodeURIComponent('*'),
|
||||
})
|
||||
const topFollowers = topPages?.pages.flatMap(p => p.actors)
|
||||
|
||||
const {data: results, isLoading: isLoadingResults} =
|
||||
const {data: results, isFetching: isFetchingResults} =
|
||||
useActorAutocompleteQuery(query, true, 12)
|
||||
|
||||
const isLoading = isLoadingTopPages || isFetchingResults
|
||||
|
||||
const renderItem = ({
|
||||
item,
|
||||
}: ListRenderItemInfo<AppBskyActorDefs.ProfileViewBasic>) => {
|
||||
|
@ -80,7 +86,7 @@ export function StepProfiles({
|
|||
onEndReachedThreshold={isNative ? 2 : 0.25}
|
||||
ListEmptyComponent={
|
||||
<View style={[a.flex_1, a.align_center, a.mt_lg, a.px_lg]}>
|
||||
{isLoadingResults ? (
|
||||
{isLoading ? (
|
||||
<Loader size="lg" />
|
||||
) : (
|
||||
<Text
|
||||
|
|
Loading…
Reference in New Issue