disable/unmount tabs while clearing image cache

app/hooks/settings.ts

@@ -30,39 +30,46 @@ export const useFirstRun = () => {
 export const useResetImageCache = () => {
   const serverIds = useStoreDeep(store => Object.keys(store.settings.servers))
   const changeCacheBuster = useStore(store => store.changeCacheBuster)
+  const setDisableMusicTabs = useStore(store => store.setDisableMusicTabs)
 
   return async () => {
-    // disable/invalidate queries
+    setDisableMusicTabs(true)
-    await Promise.all([
-      queryClient.cancelQueries(qk.artistArt(), { active: true }),
-      queryClient.cancelQueries(qk.coverArt(), { active: true }),
-      queryClient.cancelQueries(qk.existingFiles(), { active: true }),
-      queryClient.invalidateQueries(qk.artistArt(), { refetchActive: false }),
-      queryClient.invalidateQueries(qk.coverArt(), { refetchActive: false }),
-      queryClient.invalidateQueries(qk.existingFiles(), { refetchActive: false }),
-    ])
 
-    // delete all images
+    try {
-    const itemTypes: CacheItemTypeKey[] = ['artistArt', 'artistArtThumb', 'coverArt', 'coverArtThumb']
+      // disable/invalidate queries
-    await Promise.all(
+      await Promise.all([
-      serverIds.flatMap(id =>
+        queryClient.cancelQueries(qk.artistArt(), { active: true }),
-        itemTypes.map(async type => {
+        queryClient.cancelQueries(qk.coverArt(), { active: true }),
-          const dir = cacheDir(id, type)
+        queryClient.cancelQueries(qk.existingFiles(), { active: true }),
-          try {
+        queryClient.invalidateQueries(qk.artistArt(), { refetchActive: false }),
-            await RNFS.unlink(dir)
+        queryClient.invalidateQueries(qk.coverArt(), { refetchActive: false }),
-          } catch {}
+        queryClient.invalidateQueries(qk.existingFiles(), { refetchActive: false }),
-        }),
+      ])
-      ),
-    )
 
-    // change cacheBuster
+      // delete all images
-    changeCacheBuster()
+      const itemTypes: CacheItemTypeKey[] = ['artistArt', 'artistArtThumb', 'coverArt', 'coverArtThumb']
+      await Promise.all(
+        serverIds.flatMap(id =>
+          itemTypes.map(async type => {
+            const dir = cacheDir(id, type)
+            try {
+              await RNFS.unlink(dir)
+            } catch {}
+          }),
+        ),
+      )
 
-    // enable queries
+      // change cacheBuster
-    await Promise.all([
+      changeCacheBuster()
-      queryClient.refetchQueries(qk.existingFiles(), { active: true }),
+    } finally {
-      queryClient.refetchQueries(qk.artistArt(), { active: true }),
+      setDisableMusicTabs(false)
-      queryClient.refetchQueries(qk.coverArt(), { active: true }),
+
-    ])
+      // enable queries
+      await Promise.all([
+        queryClient.refetchQueries(qk.existingFiles(), { active: true }),
+        queryClient.refetchQueries(qk.artistArt(), { active: true }),
+        queryClient.refetchQueries(qk.coverArt(), { active: true }),
+      ])
+    }
   }
 }

app/navigation/BottomTabBar.tsx

@@ -18,10 +18,11 @@ const BottomTabButton = React.memo<{
   isFocused: boolean
   icon: OutlineFillIcon
   navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>
-}>(({ routeKey, label, name, isFocused, icon, navigation }) => {
+  disabled?: boolean
+}>(({ routeKey, label, name, isFocused, icon, navigation, disabled }) => {
   const firstRun = useFirstRun()
 
-  const disabled = firstRun && name !== 'settings'
+  disabled = !!disabled || (firstRun && name !== 'settings')
 
   const onPress = () => {
     const event = navigation.emit({
@@ -67,6 +68,13 @@ const BottomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigat
             ? options.title
             : route.name
 
+        let iconKey = route.name
+        let disabled = false
+        if (route.name.endsWith('-disabled')) {
+          iconKey = route.name.split('-')[0]
+          disabled = true
+        }
+
         return (
           <BottomTabButton
             key={route.key}
@@ -74,8 +82,9 @@ const BottomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigat
             label={label}
             name={route.name}
             isFocused={state.index === index}
-            icon={bottomTabIcons[route.name]}
+            icon={bottomTabIcons[iconKey]}
             navigation={navigation}
+            disabled={disabled}
           />
         )
       })}

app/navigation/BottomTabNavigator.tsx

@@ -176,12 +176,24 @@ const Tab = createBottomTabNavigator()
 const BottomTabNavigator = withSuspense(() => {
   const { t } = useTranslation()
   const firstRun = useFirstRun()
-  const resetServer = useStore(store => store.resetServer)
+  const disableMusicTabs = useStore(store => store.disableMusicTabs)
 
   return (
     <Tab.Navigator tabBar={BottomTabBar} initialRouteName={firstRun ? 'settings' : 'home'}>
-      {resetServer ? (
+      {disableMusicTabs ? (
-        <></>
+        <>
+          <Tab.Screen name="home-disabled" children={() => null} options={{ tabBarLabel: t('navigation.tabs.home') }} />
+          <Tab.Screen
+            name="library-disabled"
+            children={() => null}
+            options={{ tabBarLabel: t('navigation.tabs.library') }}
+          />
+          <Tab.Screen
+            name="search-disabled"
+            children={() => null}
+            options={{ tabBarLabel: t('navigation.tabs.search') }}
+          />
+        </>
       ) : (
         <>
           <Tab.Screen name="home" component={HomeTab} options={{ tabBarLabel: t('navigation.tabs.home') }} />

app/state/settings.ts

@@ -27,7 +27,9 @@ export type SettingsSlice = {
   }
 
   client?: SubsonicApiClient
-  resetServer: boolean
+
+  disableMusicTabs: boolean
+  setDisableMusicTabs: (value: boolean) => void
 
   changeCacheBuster: () => void
 
@@ -79,7 +81,12 @@ export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice
     cacheBuster: newCacheBuster(),
   },
 
-  resetServer: false,
+  disableMusicTabs: false,
+  setDisableMusicTabs: value => {
+    set(store => {
+      store.disableMusicTabs = value
+    })
+  },
 
   changeCacheBuster: () => {
     set(store => {
@@ -104,7 +111,7 @@ export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice
     }
 
     set(state => {
-      state.resetServer = true
+      state.disableMusicTabs = true
     })
 
     set(state => {
@@ -113,7 +120,7 @@ export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice
     })
 
     set(state => {
-      state.resetServer = false
+      state.disableMusicTabs = false
     })
   },