Remove React.lazy on overlay and tooltip

src-web/components/Overlay.tsx

@@ -1,11 +1,10 @@
 import classNames from 'classnames';
+import { FocusTrap } from 'focus-trap-react';
 import * as m from 'motion/react-m';
-import type { ReactNode} from 'react';
+import type { ReactNode } from 'react';
-import React, { Suspense , lazy, useRef } from 'react';
+import React, { useRef } from 'react';
 import { Portal } from './Portal';
 
-const FocusTrap = lazy(() => import('focus-trap-react'));
-
 interface Props {
   children: ReactNode;
   portalName: string;
@@ -51,52 +50,50 @@ export function Overlay({
   return (
     <Portal name={portalName}>
       {open && (
-        <Suspense>
+        <FocusTrap
-          <FocusTrap
+          focusTrapOptions={{
-            focusTrapOptions={{
+            allowOutsideClick: true, // So we can still click toasts and things
-              allowOutsideClick: true, // So we can still click toasts and things
+            delayInitialFocus: true,
-              delayInitialFocus: true,
+            fallbackFocus: () => containerRef.current!, // always have a target
-              fallbackFocus: () => containerRef.current!, // always have a target
+            initialFocus: () =>
-              initialFocus: () =>
+              // Doing this explicitly seems to work better than the default behavior for some reason
-                // Doing this explicitly seems to work better than the default behavior for some reason
+              containerRef.current?.querySelector<HTMLElement>(
-                containerRef.current?.querySelector<HTMLElement>(
+                [
-                  [
+                  'a[href]',
-                    'a[href]',
+                  'input:not([disabled])',
-                    'input:not([disabled])',
+                  'select:not([disabled])',
-                    'select:not([disabled])',
+                  'textarea:not([disabled])',
-                    'textarea:not([disabled])',
+                  'button:not([disabled])',
-                    'button:not([disabled])',
+                  '[tabindex]:not([tabindex="-1"])',
-                    '[tabindex]:not([tabindex="-1"])',
+                  '[contenteditable]:not([contenteditable="false"])',
-                    '[contenteditable]:not([contenteditable="false"])',
+                ].join(', '),
-                  ].join(', '),
+              ) ?? undefined,
-                ) ?? undefined,
+          }}
-            }}
+        >
+          <m.div
+            ref={containerRef}
+            tabIndex={-1}
+            className={classNames('fixed inset-0', zIndexes[zIndex])}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
           >
-            <m.div
+            <div
-              ref={containerRef}
+              aria-hidden
-              tabIndex={-1}
+              onClick={onClose}
-              className={classNames('fixed inset-0', zIndexes[zIndex])}
+              className={classNames(
-              initial={{ opacity: 0 }}
+                'absolute inset-0',
-              animate={{ opacity: 1 }}
+                variant === 'default' && 'bg-backdrop backdrop-blur-sm',
-            >
-              <div
-                aria-hidden
-                onClick={onClose}
-                className={classNames(
-                  'absolute inset-0',
-                  variant === 'default' && 'bg-backdrop backdrop-blur-sm',
-                )}
-              />
-
-              {/* Show the draggable region at the top */}
-              {/* TODO: Figure out tauri drag region and also make clickable still */}
-              {variant === 'default' && (
-                <div data-tauri-drag-region className="absolute top-0 left-0 h-md right-0" />
               )}
-              {children}
+            />
-            </m.div>
+
-          </FocusTrap>
+            {/* Show the draggable region at the top */}
-        </Suspense>
+            {/* TODO: Figure out tauri drag region and also make clickable still */}
+            {variant === 'default' && (
+              <div data-tauri-drag-region className="absolute top-0 left-0 h-md right-0" />
+            )}
+            {children}
+          </m.div>
+        </FocusTrap>
       )}
     </Portal>
   );

src-web/components/core/Tooltip.tsx

@@ -1,17 +1,8 @@
 import classNames from 'classnames';
-import type {
+import type { CSSProperties, KeyboardEvent, ReactNode } from 'react';
-  CSSProperties,
+import React, { useRef, useState } from 'react';
-  KeyboardEvent,
-  ReactNode} from 'react';
-import React, {
-  lazy,
-  Suspense,
-  useRef,
-  useState,
-} from 'react';
 import { generateId } from '../../lib/generateId';
-
+import { Portal } from '../Portal';
-const Portal = lazy(() => import('../Portal').then((m) => ({ default: m.Portal })));
 
 export interface TooltipProps {
   children: ReactNode;
@@ -75,7 +66,7 @@ export function Tooltip({ children, content, tabIndex, size = 'md' }: TooltipPro
   const id = useRef(`tooltip-${generateId()}`);
 
   return (
-    <Suspense>
+    <>
       <Portal name="tooltip">
         <div
           ref={tooltipRef}
@@ -114,7 +105,7 @@ export function Tooltip({ children, content, tabIndex, size = 'md' }: TooltipPro
       >
         {children}
       </span>
-    </Suspense>
+    </>
   );
 }