Fix React Compiler lints + improve performance

app/common/src/queryClient.ts

@@ -56,7 +56,7 @@ declare module '@tanstack/query-core' {
 /** Query Client type suitable for shared use in React and Vue. */
 export type QueryClient = vueQuery.QueryClient
 
-const DEFAULT_QUERY_STALE_TIME_MS = 2 * 60 * 1000
+const DEFAULT_QUERY_STALE_TIME_MS = Infinity
 const DEFAULT_QUERY_PERSIST_TIME_MS = 30 * 24 * 60 * 60 * 1000 // 30 days
 
 const DEFAULT_BUSTER = 'v1.1'

app/gui/e2e/dashboard/actions/index.ts

@@ -1,6 +1,5 @@
 /** @file Various actions, locators, and constants used in end-to-end tests. */
 import * as test from '@playwright/test'
-import * as path from 'path'
 
 import { TEXTS } from 'enso-common/src/text'
 

app/gui/e2e/dashboard/loginScreen.spec.ts

@@ -1,14 +1,7 @@
 /** @file Test the login flow. */
 import * as test from '@playwright/test'
 
-import {
-  INVALID_PASSWORD,
-  mockAll,
-  passAgreementsDialog,
-  TEXT,
-  VALID_EMAIL,
-  VALID_PASSWORD,
-} from './actions'
+import { INVALID_PASSWORD, mockAll, TEXT, VALID_EMAIL, VALID_PASSWORD } from './actions'
 
 // =============
 // === Tests ===

app/gui/package.json

@@ -21,8 +21,7 @@
     "build": "vite build",
     "build-cloud": "cross-env CLOUD_BUILD=true corepack pnpm run build",
     "preview": "vite preview",
-    "//": "max-warnings set to 41 to match the amount of warnings introduced by the new react compiler. Eventual goal is to remove all the warnings.",
-    "lint": "eslint . --max-warnings=39",
+    "lint": "eslint . --max-warnings=0",
     "format": "prettier --version && prettier --write src/ && eslint . --fix",
     "dev:vite": "vite",
     "test": "corepack pnpm run /^^^^test:.*/",

app/gui/src/dashboard/App.tsx

@@ -227,6 +227,27 @@ export default function App(props: AppProps) {
     },
   })
 
+  const queryClient = props.queryClient
+
+  // Force all queries to be stale
+  // We don't use the `staleTime` option because it's not performant
+  // and triggers unnecessary setTimeouts.
+  reactQuery.useQuery({
+    queryKey: ['refresh'],
+    queryFn: () => {
+      queryClient
+        .getQueryCache()
+        .getAll()
+        .forEach((query) => {
+          query.isStale = () => true
+        })
+
+      return null
+    },
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    refetchInterval: 2 * 60 * 1000,
+  })
+
   // Both `BackendProvider` and `InputBindingsProvider` depend on `LocalStorageProvider`.
   // Note that the `Router` must be the parent of the `AuthProvider`, because the `AuthProvider`
   // will redirect the user between the login/register pages and the dashboard.
@@ -279,9 +300,11 @@ function AppRouter(props: AppRouterProps) {
   const httpClient = useHttpClient()
   const logger = useLogger()
   const navigate = router.useNavigate()
+
   const { getText } = textProvider.useText()
   const { localStorage } = localStorageProvider.useLocalStorage()
   const { setModal } = modalProvider.useSetModal()
+
   const navigator2D = navigator2DProvider.useNavigator2D()
 
   const localBackend = React.useMemo(

app/gui/src/dashboard/components/AnimatedBackground.tsx

@@ -3,7 +3,7 @@
  *
  * `<AnimatedBackground />` component visually highlights selected items by sliding a background into view when hovered over or clicked.
  */
-import type { Transition } from 'framer-motion'
+import type { Transition, Variants } from 'framer-motion'
 import { AnimatePresence, motion } from 'framer-motion'
 import type { PropsWithChildren } from 'react'
 import { createContext, memo, useContext, useId, useMemo } from 'react'
@@ -34,9 +34,9 @@ const DEFAULT_TRANSITION: Transition = {
   // eslint-disable-next-line @typescript-eslint/no-magic-numbers
   damping: 20,
   // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-  mass: 0.1,
+  mass: 0.5,
   // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-  velocity: 12,
+  velocity: 8,
 }
 
 /** `<AnimatedBackground />` component visually highlights selected items by sliding a background into view when hovered over or clicked. */
@@ -92,9 +92,16 @@ AnimatedBackground.Item = memo(function AnimatedBackgroundItem(props: AnimatedBa
     animationClassName,
     children,
     isSelected,
-    underlayElement = <div className={twJoin('h-full w-full', animationClassName)} />,
+    underlayElement: rawUnderlayElement,
   } = props
 
+  const defaultUnderlayElement = useMemo(
+    () => <div className={twJoin('h-full w-full', animationClassName)} />,
+    [animationClassName],
+  )
+
+  const underlayElement = rawUnderlayElement ?? defaultUnderlayElement
+
   const context = useContext(AnimatedBackgroundContext)
   invariant(context, '<AnimatedBackground.Item /> must be placed within an <AnimatedBackground />')
   const { value: activeValue, transition, layoutId } = context
@@ -107,15 +114,15 @@ AnimatedBackground.Item = memo(function AnimatedBackgroundItem(props: AnimatedBa
   const isActive = isSelected ?? activeValue === value
 
   return (
-    <div className={twJoin('relative *:isolate', className)}>
+    <div className={twJoin('relative', className)}>
       <AnimatedBackgroundItemUnderlay
         isActive={isActive}
         underlayElement={underlayElement}
         layoutId={layoutId}
         transition={transition}
       />
 
-      {children}
+      <div className="isolate contents">{children}</div>
     </div>
   )
 })
@@ -130,6 +137,11 @@ interface AnimatedBackgroundItemUnderlayProps {
   readonly transition: Transition
 }
 
+const VARIANTS: Variants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 },
+}
+
 /**
  * Underlay for {@link AnimatedBackground.Item}.
  */
@@ -145,11 +157,12 @@ const AnimatedBackgroundItemUnderlay = memo(function AnimatedBackgroundItemUnder
         <motion.div
           layout="position"
           layoutId={`background-${layoutId}`}
-          className="pointer-events-none absolute inset-0"
+          className="pointer-events-none absolute inset-0 isolate"
           transition={transition}
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
+          variants={VARIANTS}
+          initial="hidden"
+          animate="visible"
+          exit="hidden"
         >
           {underlayElement}
         </motion.div>