disable/unmount tabs while clearing image cache

app/hooks/settings.ts

@@ -30,8 +30,12 @@ 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 () => {
+    setDisableMusicTabs(true)
+
+    try {
       // disable/invalidate queries
       await Promise.all([
         queryClient.cancelQueries(qk.artistArt(), { active: true }),
@@ -57,6 +61,8 @@ export const useResetImageCache = () => {
 
       // change cacheBuster
       changeCacheBuster()
+    } finally {
+      setDisableMusicTabs(false)
 
       // enable queries
       await Promise.all([
@@ -65,4 +71,5 @@ export const useResetImageCache = () => {
         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
     })
   },