pick from dict better than find from array

src/components/common/AlbumView.tsx

@@ -1,13 +1,14 @@
 import { useNavigation } from '@react-navigation/native';
 import { useAtomValue } from 'jotai/utils';
 import React, { useEffect, useState } from 'react';
-import { GestureResponderEvent, Image, Pressable, Text, useWindowDimensions, View } from 'react-native';
+import { ActivityIndicator, GestureResponderEvent, Image, Pressable, Text, useWindowDimensions, View } from 'react-native';
 import { useCurrentTrackId, useSetQueue } from '../../hooks/player';
 import { albumAtomFamily } from '../../state/music';
 import colors from '../../styles/colors';
 import text from '../../styles/text';
 import AlbumArt from './AlbumArt';
 import Button from './Button';
+import GradientBackground from './GradientBackground';
 import GradientScrollView from './GradientScrollView';
 
 const SongItem: React.FC<{
@@ -153,6 +154,21 @@ const AlbumDetails: React.FC<{
   );
 }
 
+const AlbumViewFallback = () => {
+  const layout = useWindowDimensions();
+
+  const coverSize = layout.width - layout.width / 2.5;
+
+  return (
+    <GradientBackground style={{
+      alignItems: 'center',
+      paddingTop: coverSize / 8 + coverSize / 2 - 18,
+    }}>
+      <ActivityIndicator size='large' color={colors.accent} />
+    </GradientBackground>
+  );
+}
+
 const AlbumView: React.FC<{
   id: string,
   title: string;
@@ -164,8 +180,9 @@ const AlbumView: React.FC<{
   });
 
   return (
-    <React.Suspense fallback={<Text>Loading...</Text>}>
+    <React.Suspense fallback={<AlbumViewFallback />}>
       <AlbumDetails id={id} />
+      {/* <AlbumViewFallback /> */}
     </React.Suspense>
   );
 };

src/components/common/GradientBackground.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useWindowDimensions } from 'react-native';
+import { useWindowDimensions, ViewStyle } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import colors from '../../styles/colors';
 
@@ -7,7 +7,8 @@ const GradientBackground: React.FC<{
   height?: number | string;
   width?: number | string;
   position?: 'relative' | 'absolute';
-}> = ({ height, width, position }) => {
+  style?: ViewStyle;
+}> = ({ height, width, position, style, children }) => {
   const layout = useWindowDimensions();
 
   return (
@@ -15,11 +16,14 @@ const GradientBackground: React.FC<{
       colors={[colors.gradient.high, colors.gradient.low]}
       locations={[0.01,0.7]}
       style={{
+        ...style,
         width: width || '100%',
         height: height || layout.height,
         position: position || 'absolute',
       }}
-    />
+    >
+      {children}
+    </LinearGradient>
   );
 };
 

src/components/library/AlbumsTab.tsx

@@ -61,8 +61,10 @@ const AlbumsList = () => {
   const updating = useAtomValue(albumsUpdatingAtom);
   const updateAlbums = useUpdateAlbums();
 
+  const albumsList = Object.values(albums);
+
   useEffect(() => {
-    if (albums.length === 0) {
+    if (albumsList.length === 0) {
       updateAlbums();
     }
   });
@@ -70,7 +72,7 @@ const AlbumsList = () => {
   return (
     <View style={{ flex: 1 }}>
       <GradientFlatList
-        data={albums}
+        data={albumsList}
         renderItem={AlbumListRenderItem}
         keyExtractor={item => item.id}
         numColumns={3}

src/state/music.ts

@@ -2,7 +2,7 @@ import { atom, useAtom } from 'jotai';
 import { atomFamily, useAtomValue, useUpdateAtom } from 'jotai/utils';
 import { Album, AlbumArt, AlbumWithSongs, Artist, ArtistArt, ArtistInfo, Song } from '../models/music';
 import { SubsonicApiClient } from '../subsonic/api';
-import { AlbumID3Element, ArtistID3Element, ArtistInfo2Element, ChildElement } from '../subsonic/elements';
+import { AlbumID3Element, ArtistInfo2Element, ChildElement } from '../subsonic/elements';
 import { GetArtistResponse } from '../subsonic/responses';
 import { activeServerAtom } from './settings';
 
@@ -36,7 +36,7 @@ export const useUpdateArtists = () => {
   }
 }
 
-export const albumsAtom = atom<Album[]>([]);
+export const albumsAtom = atom<Record<string, Album>>({});
 export const albumsUpdatingAtom = atom(false);
 
 export const useUpdateAlbums = () => {
@@ -57,7 +57,11 @@ export const useUpdateAlbums = () => {
     const client = new SubsonicApiClient(server);
     const response = await client.getAlbumList2({ type: 'alphabeticalByArtist', size: 500 });
 
-    setAlbums(response.data.albums.map(a => mapAlbumID3(a, client)));
+    setAlbums(response.data.albums.reduce((acc, next) => {
+      const album = mapAlbumID3(next, client);
+      acc[album.id] = album;
+      return acc;
+    }, {} as Record<string, Album>));
     setUpdating(false);
   }
 }
@@ -80,7 +84,7 @@ export const albumArtAtomFamily = atomFamily((id: string) => atom<AlbumArt | und
   }
 
   const albums = get(albumsAtom);
-  const album = albums.find(a => a.id === id);
+  const album = id in albums ? albums[id] : undefined;
   if (!album) {
     return undefined;
   }

src/styles/text.ts

@@ -13,7 +13,7 @@ const paragraph: TextStyle = {
 
 const header: TextStyle = {
   ...paragraph,
-  fontSize: 19,
+  fontSize: 18,
   fontFamily: fontSemiBold,
 };