activity indicators on artist tabs

components/Artist/albums.tsx

@@ -5,11 +5,12 @@ import { Text } from '../Global/helpers/text'
 import { useArtistContext } from './provider'
 import { convertRunTimeTicksToSeconds } from '../../helpers/runtimeticks'
 import Animated, { useAnimatedScrollHandler } from 'react-native-reanimated'
+import { ActivityIndicator } from 'react-native'
 export default function Albums({
 	route,
 	navigation,
 }: ArtistAlbumsProps | ArtistEpsProps): React.JSX.Element {
-	const { albums, scroll } = useArtistContext()
+	const { albums, fetchingAlbums, scroll } = useArtistContext()
 	const scrollHandler = useAnimatedScrollHandler({
 		onScroll: (event) => {
 			'worklet'
@@ -60,9 +61,13 @@ export default function Albums({
 			)}
 			onScroll={scrollHandler}
 			ListEmptyComponent={
-				<Text textAlign='center' justifyContent='center'>
-					No albums
-				</Text>
+				fetchingAlbums ? (
+					<ActivityIndicator />
+				) : (
+					<Text textAlign='center' justifyContent='center'>
+						No albums
+					</Text>
+				)
 			}
 		/>
 	)

components/Artist/provider.tsx

@@ -13,7 +13,8 @@ import { createContext, ReactNode, SetStateAction, useContext, useState } from '
 import { SharedValue, useSharedValue } from 'react-native-reanimated'
 
 interface ArtistContext {
-	refreshing: boolean
+	fetchingAlbums: boolean
+	fetchingSimilarArtists: boolean
 	refresh: () => void
 	albums: BaseItemDto[] | undefined
 	similarArtists: BaseItemDto[] | undefined
@@ -58,8 +59,6 @@ const ArtistContextInitializer = (artist: BaseItemDto) => {
 		queryFn: () => fetchSimilar(artist.Id!),
 	})
 
-	const refreshing = fetchingAlbums || fetchingSimilarArtists
-
 	const refresh = () => {
 		refetchAlbums()
 		refetchRefetchSimilarArtists()
@@ -71,7 +70,8 @@ const ArtistContextInitializer = (artist: BaseItemDto) => {
 		artist,
 		albums,
 		similarArtists,
-		refreshing,
+		fetchingAlbums,
+		fetchingSimilarArtists,
 		refresh,
 		scroll,
 		setScroll,
@@ -79,7 +79,8 @@ const ArtistContextInitializer = (artist: BaseItemDto) => {
 }
 
 const ArtistContext = createContext<ArtistContext>({
-	refreshing: false,
+	fetchingAlbums: false,
+	fetchingSimilarArtists: false,
 	artist: {},
 	albums: [],
 	similarArtists: [],

components/Artist/similar.tsx

@@ -5,6 +5,7 @@ import { RouteProp } from '@react-navigation/native'
 import { Text } from '../Global/helpers/text'
 import { useArtistContext } from './provider'
 import Animated, { useAnimatedScrollHandler } from 'react-native-reanimated'
+import { ActivityIndicator } from 'react-native'
 
 export default function SimilarArtists({
 	route,
@@ -13,7 +14,7 @@ export default function SimilarArtists({
 	route: RouteProp<StackParamList, 'SimilarArtists'>
 	navigation: NativeStackNavigationProp<StackParamList>
 }): React.JSX.Element {
-	const { similarArtists, scroll } = useArtistContext()
+	const { similarArtists, fetchingSimilarArtists, scroll } = useArtistContext()
 	const scrollHandler = useAnimatedScrollHandler({
 		onScroll: (event) => {
 			'worklet'
@@ -42,9 +43,13 @@ export default function SimilarArtists({
 				/>
 			)}
 			ListEmptyComponent={
-				<Text justify={'center'} textAlign='center'>
-					No similar artists
-				</Text>
+				fetchingSimilarArtists ? (
+					<ActivityIndicator />
+				) : (
+					<Text justify={'center'} textAlign='center'>
+						No similar artists
+					</Text>
+				)
 			}
 			onScroll={scrollHandler}
 		/>