imprv CoverArt perf and interface

app/components/ArtistArt.tsx

@@ -1,11 +1,12 @@
-import { useAtomValue } from 'jotai/utils'
-import React, { useState } from 'react'
-import { ActivityIndicator, LayoutChangeEvent, StyleSheet, View } from 'react-native'
-import FastImage from 'react-native-fast-image'
-import LinearGradient from 'react-native-linear-gradient'
+import CoverArt from '@app/components/CoverArt'
 import { artistArtAtomFamily } from '@app/state/music'
 import colors from '@app/styles/colors'
-import CoverArt from '@app/components/CoverArt'
+import { useLayout } from '@react-native-community/hooks'
+import { useAtomValue } from 'jotai/utils'
+import React from 'react'
+import { ActivityIndicator, StyleSheet, View } from 'react-native'
+import FastImage from 'react-native-fast-image'
+import LinearGradient from 'react-native-linear-gradient'
 import IconFA5 from 'react-native-vector-icons/FontAwesome5'
 
 interface ArtistArtSizeProps {
@@ -23,15 +24,11 @@ interface ArtistArtProps extends ArtistArtSizeProps {
 }
 
 const PlaceholderContainer: React.FC<ArtistArtSizeProps> = ({ height, width, children }) => {
-  const [layout, setLayout] = useState({ x: 0, y: 0, width: 0, height: 0 })
-
-  const onLayout = (event: LayoutChangeEvent) => {
-    setLayout(event.nativeEvent.layout)
-  }
+  const layout = useLayout()
 
   return (
     <LinearGradient
-      onLayout={onLayout}
+      onLayout={layout.onLayout}
       colors={[colors.accent, colors.accentLow]}
       style={[styles.placeholderContainer, { height, width }]}>
       <IconFA5 name="microphone" color="black" size={layout.width / 1.8} style={styles.placeholderIcon} />
@@ -142,10 +139,8 @@ const ArtistArt = React.memo<ArtistArtProps>(({ id, height, width, round }) => {
   round = round === undefined ? true : round
 
   const Placeholder = () => {
-    const none = <NoneUp height={height} width={width} />
-
-    if (!artistArt || !artistArt.albumCoverUris) {
-      return none
+    if (!artistArt) {
+      return <NoneUp height={height} width={width} />
     }
     const { albumCoverUris } = artistArt
 
@@ -162,15 +157,14 @@ const ArtistArt = React.memo<ArtistArtProps>(({ id, height, width, round }) => {
       return <OneUp height={height} width={width} albumCoverUris={albumCoverUris} />
     }
 
-    return none
+    return <NoneUp height={height} width={width} />
   }
 
   return (
     <View style={[styles.container, round ? { borderRadius: height / 2 } : {}]}>
       <CoverArt
-        PlaceholderComponent={Placeholder}
-        height={height}
-        width={width}
+        FallbackComponent={Placeholder}
+        style={{ height, width }}
         coverArtUri={artistArt?.uri}
         resizeMode={FastImage.resizeMode.cover}
       />

app/components/CoverArt.tsx

@@ -1,77 +1,84 @@
-import React, { useEffect, useState } from 'react'
-import { ActivityIndicator, LayoutChangeEvent, StyleSheet, View, ViewStyle } from 'react-native'
-import FastImage from 'react-native-fast-image'
 import colors from '@app/styles/colors'
-import IconFA5 from 'react-native-vector-icons/FontAwesome5'
+import React, { useState } from 'react'
+import { ActivityIndicator, StyleSheet, View } from 'react-native'
+import FastImage, { ImageStyle } from 'react-native-fast-image'
 import LinearGradient from 'react-native-linear-gradient'
 
+type CoverImageProps = {
+  uri?: string
+  style?: ImageStyle
+  resizeMode?: keyof typeof FastImage.resizeMode
+  onProgress?: () => void
+  onLoadEnd?: () => void
+  onError?: () => void
+}
+
+const CoverImage = React.memo<CoverImageProps>(({ uri, style, resizeMode, onProgress, onLoadEnd, onError }) => (
+  <FastImage
+    source={{ uri }}
+    style={style}
+    resizeMode={resizeMode || FastImage.resizeMode.contain}
+    onProgress={onProgress}
+    onLoadEnd={onLoadEnd}
+    onError={onError}
+  />
+))
+
+const Fallback = React.memo<{}>(({}) => {
+  return <LinearGradient colors={[colors.accent, colors.accentLow]} style={styles.fallback} />
+})
+
 const CoverArt: React.FC<{
-  PlaceholderComponent?: () => JSX.Element
+  FallbackComponent?: () => JSX.Element
   placeholderIcon?: string
   height?: string | number
   width?: string | number
   coverArtUri?: string
   resizeMode?: keyof typeof FastImage.resizeMode
-  style?: ViewStyle
-}> = ({ PlaceholderComponent, placeholderIcon, height, width, coverArtUri, resizeMode, style }) => {
-  const [placeholderVisible, setPlaceholderVisible] = useState(false)
-  const [loading, setLoading] = useState(true)
-  const [layout, setLayout] = useState({ x: 0, y: 0, width: 0, height: 0 })
+  style?: ImageStyle
+}> = ({ FallbackComponent, coverArtUri, resizeMode, style }) => {
+  const [loading, setLoading] = useState(false)
+  const [fallbackVisible, setFallbackVisible] = useState(false)
 
-  useEffect(() => {
-    if (!coverArtUri) {
-      setLoading(false)
-    }
-  }, [coverArtUri, setLoading])
-
-  const Image = () => (
-    <FastImage
-      source={{ uri: coverArtUri, priority: 'high' }}
-      style={{ ...styles.image, opacity: placeholderVisible ? 0 : 1 }}
-      resizeMode={resizeMode || FastImage.resizeMode.contain}
-      onError={() => {
-        setLoading(false)
-        setPlaceholderVisible(true)
-      }}
-      onLoadEnd={() => setLoading(false)}
-    />
-  )
-
-  const Placeholder = () => (
-    <LinearGradient colors={[colors.accent, colors.accentLow]} style={styles.placeholder}>
-      <IconFA5 name={placeholderIcon || 'record-vinyl'} color="black" size={layout.width / 1.5} />
-    </LinearGradient>
-  )
-
-  const onLayout = (event: LayoutChangeEvent) => {
-    setLayout(event.nativeEvent.layout)
-  }
+  const enableLoading = React.useCallback(() => setLoading(true), [])
+  const disableLoading = React.useCallback(() => setLoading(false), [])
+  const enableFallback = React.useCallback(() => setFallbackVisible(true), [])
 
   return (
-    <View style={[style, { height, width }]} onLayout={onLayout}>
-      {coverArtUri ? <Image /> : <></>}
-      <View style={{ ...styles.placeholderContainer, opacity: placeholderVisible ? 1 : 0 }}>
-        {PlaceholderComponent ? <PlaceholderComponent /> : <Placeholder />}
-      </View>
-      <ActivityIndicator style={styles.indicator} animating={loading} size={'large'} color={colors.accent} />
+    <View style={style}>
+      <CoverImage
+        uri={coverArtUri}
+        style={style}
+        resizeMode={resizeMode}
+        onProgress={enableLoading}
+        onLoadEnd={disableLoading}
+        onError={enableFallback}
+      />
+      {fallbackVisible ? (
+        FallbackComponent ? (
+          <View style={styles.fallback}>
+            <FallbackComponent />
+          </View>
+        ) : (
+          <Fallback />
+        )
+      ) : (
+        <></>
+      )}
+      <ActivityIndicator animating={loading} size="large" color={colors.accent} style={styles.indicator} />
     </View>
   )
 }
 
 const styles = StyleSheet.create({
-  container: {},
   image: {
     height: '100%',
     width: '100%',
   },
-  placeholderContainer: {
+  fallback: {
     height: '100%',
     width: '100%',
     position: 'absolute',
-  },
-  placeholder: {
-    height: '100%',
-    width: '100%',
     justifyContent: 'center',
     alignItems: 'center',
   },

app/components/NowPlayingBar.tsx

@@ -69,8 +69,7 @@ const NowPlayingBar = () => {
       <ProgressBar />
       <View style={styles.subContainer}>
         <CoverArt
-          height={styles.subContainer.height}
-          width={styles.subContainer.height}
+          style={{ height: styles.subContainer.height, width: styles.subContainer.height }}
           coverArtUri={track?.artworkThumb}
         />
         <View style={styles.detailsContainer}>

app/components/SongItem.tsx

@@ -23,7 +23,7 @@ const SongItem: React.FC<{
   return (
     <View style={styles.container}>
       <PressableOpacity onPress={onPress} style={styles.item}>
-        {showArt ? <CoverArt coverArtUri={song.coverArtThumbUri} style={styles.art} height={50} width={50} /> : <></>}
+        {showArt ? <CoverArt coverArtUri={song.coverArtThumbUri} style={styles.art} /> : <></>}
         <View style={styles.text}>
           <Text style={[styles.title, { color: currentTrack?.id === song.id ? colors.accent : colors.text.primary }]}>
             {song.title}
@@ -58,6 +58,8 @@ const styles = StyleSheet.create({
   },
   art: {
     marginRight: 10,
+    height: 50,
+    width: 50,
   },
   text: {
     flex: 1,