fix: flickering sidenav, clear swr cache on logout

.changeset/rude-terms-wonder.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/renterd': minor
+---
+
+The renterd sidenav no longer flickers when changing tabs.

apps/renterd/components/Files/index.tsx

@@ -12,6 +12,7 @@ export function Files() {
   return (
     <RenterdAuthedLayout
       title="Files"
+      navTitle={null}
       routes={routes}
       sidenav={<RenterSidenav />}
       nav={<FilesBreadcrumbMenu />}

apps/renterd/hooks/useAutopilot.tsx

@@ -1,5 +1,5 @@
 import { useAutopilotStatus } from '@siafoundation/react-core'
-import { useEffect, useState } from 'react'
+import useSWR from 'swr'
 
 export function useAutopilot() {
   const aps = useAutopilotStatus({
@@ -8,27 +8,31 @@ export function useAutopilot() {
         dedupingInterval: 60_000,
         revalidateOnFocus: false,
         refreshInterval: 60_000,
+        keepPreviousData: true,
       },
     },
   })
 
-  const [autopilotMode, setAutopilotMode] = useState<'on' | 'off' | 'init'>(
-    'init'
-  )
-
-  useEffect(() => {
-    if (autopilotMode === 'init' && (aps.data || aps.error)) {
-      if (aps.error) {
-        setAutopilotMode('off')
+  const apm = useSWR<'on' | 'off' | 'init'>(
+    [aps.data, aps.error],
+    () => {
+      if (aps.data || aps.error) {
+        if (aps.error) {
+          return 'off'
+        }
+        // This check is required because the API currently returns html when the endpoint does not exist
+        const validResponse = typeof aps.data === 'object'
+        return validResponse ? 'on' : 'off'
       }
-      // This check is required because the API currently returns html when the endpoint does not exist
-      const validResponse = typeof aps.data === 'object'
-      setAutopilotMode(validResponse ? 'on' : 'off')
+      return 'init'
+    },
+    {
+      keepPreviousData: true,
+      fallbackData: 'init',
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [aps])
+  )
 
   return {
-    autopilotMode,
+    autopilotMode: apm.data,
   }
 }

libs/design-system/src/app/AppAuthedLayout/index.tsx

@@ -10,6 +10,7 @@ type Props = {
   appName: string
   title?: string
   size?: React.ComponentProps<typeof Container>['size']
+  navTitle?: string
   nav?: React.ReactNode
   actions?: React.ReactNode
   sidenav?: React.ReactNode
@@ -31,6 +32,7 @@ type Props = {
 export function AppAuthedLayout({
   appName,
   title,
+  navTitle,
   size = '4',
   nav,
   actions,
@@ -47,7 +49,11 @@ export function AppAuthedLayout({
           {sidenav}
         </Sidenav>
         <div className="flex flex-col flex-1 overflow-hidden">
-          <AppNavbar title={title} nav={nav} actions={actions} />
+          <AppNavbar
+            title={navTitle === undefined ? title : navTitle}
+            nav={nav}
+            actions={actions}
+          />
           <ScrollArea className="z-0">
             <Container size={size} pad={false}>
               <div className="flex flex-col gap-5">{children}</div>

libs/design-system/src/hooks/useMonitorConnAndLock.ts

@@ -1,6 +1,7 @@
 import { useAppSettings } from '@siafoundation/react-core'
 import { NextRouter, useRouter } from 'next/router'
 import { useEffect } from 'react'
+import { mutate } from 'swr'
 import { useConnectivity } from './useConnectivity'
 
 type Routes = {
@@ -33,6 +34,7 @@ export function useMonitorConnAndLock(routes: Routes) {
     const noPasswordOrDisconnected = !settings.password || !isConnected
     if (isProtectedPath && noPasswordOrDisconnected) {
       setSettings({ password: '' })
+      clearAllSwrKeys()
       router.push({
         pathname: routes.lockscreen,
         query: {
@@ -55,3 +57,7 @@ export function useMonitorConnAndLock(routes: Routes) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router, isConnected, isSynced])
 }
+
+function clearAllSwrKeys() {
+  mutate(() => true, undefined, { revalidate: false })
+}