Fix React Compiler lints + improve performance

app/common/src/services/Backend.ts

@@ -842,8 +842,6 @@ export function isPlaceholderId(id: AssetId) {
     return false
   }
 
-  console.log('isPlaceholderId id', id, PLACEHOLDER_SIGNATURE in id)
-
   return PLACEHOLDER_SIGNATURE in id
 }
 

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=41",
+    "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/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'
@@ -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>