Improve liklihood of auto-reload (#10699)

app/components/Layout.tsx

@@ -4,20 +4,21 @@ import { Helmet } from "react-helmet-async";
 import styled, { DefaultTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";
-import { isModKey } from "@shared/utils/keyboard";
 import Flex from "~/components/Flex";
 import { LoadingIndicatorBar } from "~/components/LoadingIndicator";
 import SkipNavContent from "~/components/SkipNavContent";
 import SkipNavLink from "~/components/SkipNavLink";
 import env from "~/env";
-import useAutoRefresh from "~/hooks/useAutoRefresh";
-import useKeyDown from "~/hooks/useKeyDown";
 import useStores from "~/hooks/useStores";
 
 type Props = {
+  /** Main content to render in the layout. */
   children?: React.ReactNode;
+  /** Page title to display in the browser tab. Defaults to app name if not provided. */
   title?: string;
+  /** Left sidebar content. */
   sidebar?: React.ReactNode;
+  /** Right sidebar content. */
   sidebarRight?: React.ReactNode;
 };
 
@@ -28,14 +29,6 @@ const Layout = React.forwardRef(function Layout_(
   const { ui } = useStores();
   const sidebarCollapsed = !sidebar || ui.sidebarIsClosed;
 
-  useAutoRefresh();
-
-  useKeyDown(".", (event) => {
-    if (isModKey(event)) {
-      ui.toggleCollapsedSidebar();
-    }
-  });
-
   return (
     <Container column auto ref={ref}>
       <Helmet>

app/components/Sidebar/Sidebar.tsx

@@ -21,14 +21,19 @@ import ResizeBorder from "./components/ResizeBorder";
 import SidebarButton from "./components/SidebarButton";
 import ToggleButton from "./components/ToggleButton";
 import { useTranslation } from "react-i18next";
+import useKeyDown from "~/hooks/useKeyDown";
+import { isModKey } from "@shared/utils/keyboard";
 
 const ANIMATION_MS = 250;
 
 type Props = {
+  /** Whether to hide the sidebar content (sets opacity to 0). */
   hidden?: boolean;
-  /**  Whether the sidebar can be collapsed, defaults to true. */
+  /** Whether the sidebar can be collapsed, defaults to true. */
   canCollapse?: boolean;
+  /** CSS class name(s) to apply to the sidebar container. */
   className?: string;
+  /** Content to render inside the sidebar. */
   children: React.ReactNode;
 };
 
@@ -55,9 +60,14 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
   const [isResizing, setResizing] = React.useState(false);
   const [hasPointerMoved, setPointerMoved] = React.useState(false);
   const isSmallerThanMinimum = width < minWidth;
-
   const hoverTimeoutRef = React.useRef<NodeJS.Timeout | null>(null);
 
+  useKeyDown(".", (event) => {
+    if (isModKey(event)) {
+      ui.toggleCollapsedSidebar();
+    }
+  });
+
   const handleDrag = React.useCallback(
     (event: MouseEvent) => {
       // suppresses text selection

app/hooks/useAutoRefresh.ts

@@ -3,7 +3,6 @@ import { Minute } from "@shared/utils/time";
 import Logger from "~/utils/Logger";
 import useIdle from "./useIdle";
 import useInterval from "./useInterval";
-import usePageVisibility from "./usePageVisibility";
 
 // The case of isReloaded=true should never be hit as the app will reload
 // before the hook is called again, however seems like the only possible
@@ -15,24 +14,18 @@ let isReloaded = false;
  */
 export default function useAutoRefresh() {
   const [minutes, setMinutes] = useState(0);
-  const isVisible = usePageVisibility();
-  const isIdle = useIdle(15 * Minute.ms);
+  const isIdle = useIdle(5 * Minute.ms);
 
   useInterval(() => {
     setMinutes((prev) => prev + 1);
 
     if (minutes >= 60 * 24) {
-      if (isVisible) {
-        Logger.debug("lifecycle", "Skipping reload due to app visible");
-        return;
-      }
       if (!isIdle) {
         Logger.debug("lifecycle", "Skipping reload due to user activity");
         return;
       }
       if (isReloaded) {
         Logger.warn("Attempted to reload twice");
-        return;
       }
 
       Logger.debug("lifecycle", "Auto-reloading app…");

app/hooks/usePageVisibility.ts

@@ -7,7 +7,7 @@ import useEventListener from "./useEventListener";
  * @returns boolean if the page is visible
  */
 export default function usePageVisibility(): boolean {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(!document.hidden);
 
   useEventListener(
     "visibilitychange",

app/routes/index.tsx

@@ -8,6 +8,7 @@ import env from "~/env";
 import useQueryNotices from "~/hooks/useQueryNotices";
 import lazy from "~/utils/lazyWithRetry";
 import { matchDocumentSlug as documentSlug } from "~/utils/routeHelpers";
+import useAutoRefresh from "~/hooks/useAutoRefresh";
 
 const Authenticated = lazy(() => import("~/components/Authenticated"));
 const AuthenticatedRoutes = lazy(() => import("./authenticated"));
@@ -18,6 +19,7 @@ const OAuthAuthorize = lazy(() => import("~/scenes/Login/OAuthAuthorize"));
 
 export default function Routes() {
   useQueryNotices();
+  useAutoRefresh();
 
   return (
     <Suspense