(1) Fix missing image on first track

(2) Dial back the updates in useCurrentTrack

src/screens/Player/components/NowPlaying.tsx

@@ -12,8 +12,6 @@ const Artwork = styled(FastImage)`
     width: ${Screen.width * 0.8}px;
     height: ${Screen.width * 0.8}px;
     margin: 25px auto;
-    display: flex;
-    flex: 1;
 `;
 
 const styles = StyleSheet.create({
@@ -36,10 +34,17 @@ const styles = StyleSheet.create({
 
 export default function NowPlaying() {
     const track = useCurrentTrack();
+    console.log(track?.artwork);
 
     return (
         <View style={{ alignItems: 'center' }}>
-            <Artwork style={colors.imageBackground} source={{ uri: track?.artwork }} />
+            <Artwork
+                style={colors.imageBackground}
+                source={{ 
+                    uri: track?.artwork,
+                    priority: FastImage.priority.high,
+                }} 
+            />
             <Text style={styles.artist} >{track?.artist}</Text>
             <Text style={styles.title}>{track?.title}</Text>
         </View>

src/utility/useCurrentTrack.ts

@@ -17,12 +17,19 @@ export default function useCurrentTrack(): Track | undefined {
                 return;
             }
 
+            // GUARD: Only retrieve new track if it is different from the one we
+            // have currently in state.
+            if (currentTrackId === track?.id){
+                return;
+            }
+
+            // If it is different, retrieve the track and save it
             const currentTrack = await TrackPlayer.getTrack(currentTrackId);
             setTrack(currentTrack);
         };
 
         fetchTrack();
-    }, [state]);
+    }, [state, track, setTrack]);
 
     return track;
 }