Merge pull request #1138 from buster-so/big-nate-bus-1940-refreshed-a-million-times-super-fast-and-got-this-error

Do not dynamically import confirm modal

apps/web/src/components/features/global/LazyGlobalErrorCard.tsx

@@ -1,5 +1,6 @@
 import type { ErrorRouteComponent } from '@tanstack/react-router';
 import { lazy, Suspense, useEffect, useState } from 'react';
+import { LazyErrorBoundary } from './LazyErrorBoundary';
 
 // Lazy load the GlobalErrorCard component
 const GlobalErrorCard = lazy(() =>
@@ -27,16 +28,20 @@ export const LazyGlobalErrorCard: ErrorRouteComponent = (props) => {
   }
 
   return (
+    <LazyErrorBoundary>
       <Suspense fallback={<ErrorLoadingFallback />}>
         <GlobalErrorCard {...props} />
       </Suspense>
+    </LazyErrorBoundary>
   );
 };
 
 export const LazyCatchErrorCard = (error: Error) => {
   return (
+    <LazyErrorBoundary>
       <Suspense fallback={<ErrorLoadingFallback />}>
         <GlobalErrorCard error={error} reset={() => {}} />
       </Suspense>
+    </LazyErrorBoundary>
   );
 };

apps/web/src/components/ui/modal/ModalBase.tsx

@@ -1,6 +1,6 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as React from 'react';
-import { Xmark } from '@/components/ui/icons';
+import Xmark from '@/components/ui/icons/NucleoIconOutlined/xmark';
 
 import { cn } from '@/lib/utils';
 import { Button } from '../buttons/Button';

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

@@ -1,17 +1,14 @@
 import type React from 'react';
 import type { PropsWithChildren } from 'react';
-import { lazy, Suspense, useCallback } from 'react';
+import { Suspense, useCallback } from 'react';
 import { type ExternalToast, toast } from 'sonner';
 import { createContext, useContextSelector } from 'use-context-selector';
+import { ConfirmModal } from '@/components/ui/modal/ConfirmModal';
 import { Toaster } from '@/components/ui/toaster/Toaster';
 import { useConfirmModalContext } from './useConfirmModal';
 
 export type NotificationType = 'success' | 'info' | 'warning' | 'error';
 
-const ConfirmModal = lazy(() =>
-  import('@/components/ui/modal/ConfirmModal').then((mod) => ({ default: mod.ConfirmModal }))
-);
-
 export type NotificationProps = {
   type?: NotificationType;
   title?: string;
@@ -136,9 +133,7 @@ export const BusterNotificationsProvider: React.FC<PropsWithChildren> = ({ child
     <BusterNotifications.Provider value={{ ...value, openConfirmModal }}>
       {children}
       <Toaster />
-      <Suspense fallback={<span className="hidden">...</span>}>
       <ConfirmModal {...confirmModalProps} />
-      </Suspense>
     </BusterNotifications.Provider>
   );
 };

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

@@ -1,6 +1,7 @@
 import type React from 'react';
 import { lazy, Suspense, useMemo, useState } from 'react';
 import { useGetUserTeams } from '@/api/buster_rest/users/permissions';
+import { LazyErrorBoundary } from '@/components/features/global/LazyErrorBoundary';
 import { PermissionSearchAndListWrapper } from '@/components/features/permissions';
 import { Button } from '@/components/ui/buttons';
 import { Plus } from '@/components/ui/icons';
@@ -49,9 +50,11 @@ export const UserTeamsController: React.FC<{ userId: string }> = ({ userId }) =>
         <UserTeamsListContainer filteredTeams={filteredItems} userId={userId} />
       </PermissionSearchAndListWrapper>
 
+      <LazyErrorBoundary>
         <Suspense fallback={<span className="hidden">...</span>}>
           <NewTeamModal isOpen={isNewTeamModalOpen} onClose={onCloseNewTeamModal} />
         </Suspense>
+      </LazyErrorBoundary>
     </>
   );
 };

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

@@ -1,6 +1,7 @@
 import { ClientOnly } from '@tanstack/react-router';
 import sample from 'lodash/sample';
 import React, { lazy, Suspense, useState } from 'react';
+import { LazyErrorBoundary } from '@/components/features/global/LazyErrorBoundary';
 import { useMount } from '@/hooks/useMount';
 import { isServer } from '@/lib/window';
 import image1 from './images/image1.png';
@@ -85,6 +86,7 @@ const TanstackDevtoolsImpl: React.FC = React.memo(() => {
   }
 
   return (
+    <LazyErrorBoundary>
       <ClientOnly>
         <Suspense fallback={<span className="hidden">...</span>}>
           <TanstackDevtools
@@ -124,6 +126,7 @@ const TanstackDevtoolsImpl: React.FC = React.memo(() => {
           />
         </Suspense>
       </ClientOnly>
+    </LazyErrorBoundary>
   );
 });
 

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

@@ -1,6 +1,7 @@
 import { ClientOnly } from '@tanstack/react-router';
 import React, { lazy, Suspense, useEffect, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { LazyErrorBoundary } from '@/components/features/global/LazyErrorBoundary';
 import { isDev } from '@/config/dev';
 import { env } from '@/env';
 import { isServer } from '@/lib/window';
@@ -43,9 +44,11 @@ export const TanstackDevtools: React.FC = React.memo(() => {
 
   return (
     <ClientOnly>
+      <LazyErrorBoundary>
         <Suspense fallback={<span className="hidden">...</span>}>
           <LazyTanstackDevtools />
         </Suspense>
+      </LazyErrorBoundary>
     </ClientOnly>
   );
 });