Make all suspense loader have a fallback

apps/web/src/components/features/popups/SaveResetFilePopup.tsx

@@ -1,14 +1,82 @@
-import React, { lazy, Suspense } from 'react';
-import type { SaveResetFilePopupProps } from './SaveResetFilePopupBase';
+import { ClientOnly } from '@tanstack/react-router';
+import React from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { Button } from '@/components/ui/buttons';
+import { Command, ReturnKey, TriangleWarning } from '@/components/ui/icons';
+import { PopupContainer, PopupSplitter } from '@/components/ui/popup';
+import { Text } from '@/components/ui/typography';
 
-const SaveResetFilePopupBase = lazy(() =>
-  import('./SaveResetFilePopupBase').then((mod) => ({ default: mod.SaveResetFilePopupBase }))
+export type SaveResetFilePopupProps = {
+  open: boolean;
+  onReset: () => void;
+  onSave: () => void;
+  isSaving?: boolean;
+  className?: string;
+  showHotsKeys?: boolean;
+};
+
+export const SaveResetFilePopup: React.FC<SaveResetFilePopupProps> = React.memo(
+  ({ open, onReset, onSave, isSaving = false, className = '', showHotsKeys = false }) => {
+    return (
+      <ClientOnly>
+        <PopupContainer show={open} className={className}>
+          <SplitterContent
+            onReset={onReset}
+            onSave={onSave}
+            isSaving={isSaving}
+            open={open}
+            showHotsKeys={showHotsKeys}
+          />
+        </PopupContainer>
+      </ClientOnly>
+    );
+  }
 );
 
-export const SaveResetFilePopup = (props: SaveResetFilePopupProps) => {
+const SplitterContent: React.FC<{
+  onReset: () => void;
+  onSave: () => void;
+  isSaving: boolean;
+  open: boolean;
+  showHotsKeys: boolean;
+}> = React.memo(({ onReset, onSave, isSaving, open, showHotsKeys = false }) => {
+  useHotkeys('meta+enter', () => onSave(), {
+    enabled: showHotsKeys && open && !isSaving,
+    preventDefault: true,
+  });
+
   return (
-    <Suspense fallback={null}>
-      <SaveResetFilePopupBase {...props} />
-    </Suspense>
+    <div className="flex w-full items-center space-x-2.5">
+      <div className="flex items-center space-x-1">
+        <TriangleWarning />
+        <Text>Unsaved changes</Text>
+      </div>
+
+      <PopupSplitter />
+
+      <div className="flex items-center space-x-2">
+        <Button onClick={onReset}>Reset</Button>
+        <Button
+          className="flex items-center"
+          variant="black"
+          onClick={onSave}
+          loading={isSaving}
+          suffix={
+            showHotsKeys && (
+              <div className="flex space-x-1">
+                <Command />
+                <ReturnKey />
+              </div>
+            )
+          }
+        >
+          Save
+        </Button>
+      </div>
+    </div>
   );
-};
+});
+
+SaveResetFilePopup.displayName = 'SaveResetFilePopupBase';
+
+SplitterContent.displayName = 'SplitterContent';

apps/web/src/components/features/popups/SaveResetFilePopupBase.tsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
-import { Button } from '@/components/ui/buttons';
-import { Command, ReturnKey, TriangleWarning } from '@/components/ui/icons';
-import { PopupContainer, PopupSplitter } from '@/components/ui/popup';
-import { Text } from '@/components/ui/typography';
-
-export type SaveResetFilePopupProps = {
-  open: boolean;
-  onReset: () => void;
-  onSave: () => void;
-  isSaving?: boolean;
-  className?: string;
-  showHotsKeys?: boolean;
-};
-
-export const SaveResetFilePopupBase: React.FC<SaveResetFilePopupProps> = React.memo(
-  ({ open, onReset, onSave, isSaving = false, className = '', showHotsKeys = false }) => {
-    return (
-      <PopupContainer show={open} className={className}>
-        <SplitterContent
-          onReset={onReset}
-          onSave={onSave}
-          isSaving={isSaving}
-          open={open}
-          showHotsKeys={showHotsKeys}
-        />
-      </PopupContainer>
-    );
-  }
-);
-
-const SplitterContent: React.FC<{
-  onReset: () => void;
-  onSave: () => void;
-  isSaving: boolean;
-  open: boolean;
-  showHotsKeys: boolean;
-}> = React.memo(({ onReset, onSave, isSaving, open, showHotsKeys = false }) => {
-  useHotkeys('meta+enter', () => onSave(), {
-    enabled: showHotsKeys && open && !isSaving,
-    preventDefault: true,
-  });
-
-  return (
-    <div className="flex w-full items-center space-x-2.5">
-      <div className="flex items-center space-x-1">
-        <TriangleWarning />
-        <Text>Unsaved changes</Text>
-      </div>
-
-      <PopupSplitter />
-
-      <div className="flex items-center space-x-2">
-        <Button onClick={onReset}>Reset</Button>
-        <Button
-          className="flex items-center"
-          variant="black"
-          onClick={onSave}
-          loading={isSaving}
-          suffix={
-            showHotsKeys && (
-              <div className="flex space-x-1">
-                <Command />
-                <ReturnKey />
-              </div>
-            )
-          }
-        >
-          Save
-        </Button>
-      </div>
-    </div>
-  );
-});
-
-SaveResetFilePopupBase.displayName = 'SaveResetFilePopupBase';
-
-SplitterContent.displayName = 'SplitterContent';

apps/web/src/context/BusterNotifications/BusterNotifications.tsx

@@ -136,7 +136,7 @@ export const BusterNotificationsProvider: React.FC<PropsWithChildren> = ({ child
     <BusterNotifications.Provider value={{ ...value, openConfirmModal }}>
       {children}
       <Toaster />
-      <Suspense fallback={null}>
+      <Suspense fallback={<span className="hidden">...</span>}>
         <ConfirmModal {...confirmModalProps} />
       </Suspense>
     </BusterNotifications.Provider>

apps/web/src/controllers/TeamsControllers/UserTeamsController/UserTeamsController.tsx

@@ -49,7 +49,7 @@ export const UserTeamsController: React.FC<{ userId: string }> = ({ userId }) =>
         <UserTeamsListContainer filteredTeams={filteredItems} userId={userId} />
       </PermissionSearchAndListWrapper>
 
-      <Suspense fallback={null}>
+      <Suspense fallback={<span className="hidden">...</span>}>
         <NewTeamModal isOpen={isNewTeamModalOpen} onClose={onCloseNewTeamModal} />
       </Suspense>
     </>

apps/web/src/integrations/tanstack-dev-tools/tanstack-devtools-impl.tsx

@@ -74,18 +74,19 @@ const TanstackDevtoolsImpl: React.FC = React.memo(() => {
 
   return (
     <ClientOnly>
-      <Suspense fallback={null}>
+      <Suspense fallback={<span className="hidden">...</span>}>
         <TanstackDevtools
           config={{
             position: 'bottom-left',
             hideUntilHover: true,
             defaultOpen: false,
+            openHotkey: ['Shift', 'D', 'T'],
           }}
           plugins={[
             {
               name: 'Tanstack Query',
               render: (
-                <Suspense fallback={null}>
+                <Suspense fallback={<span className="hidden">...</span>}>
                   <ReactQueryDevtoolsPanel />
                 </Suspense>
               ),
@@ -93,7 +94,7 @@ const TanstackDevtoolsImpl: React.FC = React.memo(() => {
             {
               name: 'Tanstack Router',
               render: (
-                <Suspense fallback={null}>
+                <Suspense fallback={<span className="hidden">...</span>}>
                   <LazyTanStackRouterDevtoolsPanel />
                 </Suspense>
               ),
@@ -101,7 +102,7 @@ const TanstackDevtoolsImpl: React.FC = React.memo(() => {
             {
               name: 'Metric Original Store',
               render: (
-                <Suspense fallback={null}>
+                <Suspense fallback={<span className="hidden">...</span>}>
                   <LazyMetricStoreDevtools />
                 </Suspense>
               ),

apps/web/src/integrations/tanstack-dev-tools/tanstack-devtools.tsx

@@ -29,7 +29,7 @@ export const TanstackDevtools: React.FC = React.memo(() => {
   }, []);
 
   useHotkeys(
-    'shift+a',
+    'shift+d+t', //shaft (T)anstack+(D)evtools
     () => {
       console.log('🐓 Setting useDevTools to true');
       setUseDevTools(true);
@@ -43,7 +43,7 @@ export const TanstackDevtools: React.FC = React.memo(() => {
 
   return (
     <ClientOnly>
-      <Suspense fallback={null}>
+      <Suspense fallback={<span className="hidden">...</span>}>
         <LazyTanstackDevtools />
       </Suspense>
     </ClientOnly>