Fix components not being unmounted on page hide

src/apps/dashboard/controllers/dashboard.js

@@ -747,6 +747,9 @@ const DashboardPage = {
 };
 
 export default function (view) {
+    const serverId = ApiClient.serverId();
+    let unmountPathsWidget;
+
     function onRestartRequired(evt, apiClient) {
         console.debug('onRestartRequired not implemented', evt, apiClient);
     }
@@ -778,7 +781,6 @@ export default function (view) {
         }
     }
 
-    const serverId = ApiClient.serverId();
     view.querySelector('.activeDevices').addEventListener('click', onActiveDevicesClick);
     view.addEventListener('viewshow', function () {
         const page = this;
@@ -822,7 +824,7 @@ export default function (view) {
             button: page.querySelector('.btnRefresh')
         });
 
-        renderComponent(ServerPathWidget, {}, page.querySelector('#serverPaths'));
+        unmountPathsWidget = renderComponent(ServerPathWidget, {}, page.querySelector('#serverPaths'));
 
         page.querySelector('#btnRestartServer').addEventListener('click', DashboardPage.restart);
         page.querySelector('#btnShutdown').addEventListener('click', DashboardPage.shutdown);
@@ -850,6 +852,8 @@ export default function (view) {
             button: page.querySelector('.btnRefresh')
         });
 
+        if (unmountPathsWidget) unmountPathsWidget();
+
         page.querySelector('#btnRestartServer').removeEventListener('click', DashboardPage.restart);
         page.querySelector('#btnShutdown').removeEventListener('click', DashboardPage.shutdown);
     });

src/apps/dashboard/features/storage/components/StorageListItem.tsx

@@ -22,13 +22,13 @@ interface StorageListItemProps {
 const calculateUsed = (folder?: FolderStorageDto) => {
     if (typeof folder?.UsedSpace === 'undefined') return 0;
     if (typeof folder.FreeSpace === 'undefined') return 100;
-    
+
     const totalSpace = folder.FreeSpace + folder.UsedSpace;
     if (totalSpace === 0) return 0;
-    
+
     // Ensure we don't have negative values
     const usedSpace = Math.max(0, folder.UsedSpace);
-    
+
     return Math.min(100, (usedSpace / totalSpace) * 100);
 };
 

src/utils/reactUtils.tsx

@@ -14,12 +14,16 @@ export const renderComponent = <P extends object> (
     props: P,
     element: HTMLElement
 ) => {
-    createRoot(element)
-        .render(
-            <RootContext>
-                <Component {...props} />
-            </RootContext>
-        );
+    const root = createRoot(element);
+    root.render(
+        <RootContext>
+            <Component {...props} />
+        </RootContext>
+    );
+
+    // NOTE: We need to wrap the unmount in a setTimeout to workaround this issue with nested roots:
+    // https://github.com/facebook/react/issues/25675
+    return () => setTimeout(() => root.unmount());
 };
 
 const RootContext: React.FC<React.PropsWithChildren> = ({ children }) => {