Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Nate Kelley 2025-09-25 08:13:37 -06:00 committed by GitHub
parent abc8b7ed8a 32046037c0
commit 44a09810ce
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 69 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/web/src/components/features/global/LazyGlobalErrorCard.tsx
View File

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

2
apps/web/src/components/ui/modal/ModalBase.tsx
View File

@ -1,6 +1,6 @@
import * as DialogPrimitive from '@radix-ui/react-dialog'; import * as DialogPrimitive from '@radix-ui/react-dialog';
import * as React from 'react'; 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 { cn } from '@/lib/utils';
import { Button } from '../buttons/Button'; import { Button } from '../buttons/Button';

11
apps/web/src/context/BusterNotifications/BusterNotifications.tsx
View File

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

9
apps/web/src/controllers/TeamsControllers/UserTeamsController/UserTeamsController.tsx
View File

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

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

@ -1,6 +1,7 @@
import { ClientOnly } from '@tanstack/react-router'; import { ClientOnly } from '@tanstack/react-router';
import sample from 'lodash/sample'; import sample from 'lodash/sample';
import React, { lazy, Suspense, useState } from 'react'; import React, { lazy, Suspense, useState } from 'react';
import { LazyErrorBoundary } from '@/components/features/global/LazyErrorBoundary';
import { useMount } from '@/hooks/useMount'; import { useMount } from '@/hooks/useMount';
import { isServer } from '@/lib/window'; import { isServer } from '@/lib/window';
import image1 from './images/image1.png'; import image1 from './images/image1.png';
@ -85,45 +86,47 @@ const TanstackDevtoolsImpl: React.FC = React.memo(() => {
} }
return ( return (
<ClientOnly> <LazyErrorBoundary>
<Suspense fallback={<span className="hidden">...</span>}> <ClientOnly>
<TanstackDevtools <Suspense fallback={<span className="hidden">...</span>}>
config={{ <TanstackDevtools
position: 'bottom-left', config={{
hideUntilHover: true, position: 'bottom-left',
defaultOpen: false, hideUntilHover: true,
openHotkey: ['Meta', 'D'], defaultOpen: false,
triggerImage: randomImage, openHotkey: ['Meta', 'D'],
}} triggerImage: randomImage,
plugins={[ }}
{ plugins={[
name: 'Tanstack Query', {
render: ( name: 'Tanstack Query',
<Suspense fallback={<span className="hidden">...</span>}> render: (
<ReactQueryDevtoolsPanel /> <Suspense fallback={<span className="hidden">...</span>}>
</Suspense> <ReactQueryDevtoolsPanel />
), </Suspense>
}, ),
{ },
name: 'Tanstack Router', {
render: ( name: 'Tanstack Router',
<Suspense fallback={<span className="hidden">...</span>}> render: (
<LazyTanStackRouterDevtoolsPanel /> <Suspense fallback={<span className="hidden">...</span>}>
</Suspense> <LazyTanStackRouterDevtoolsPanel />
), </Suspense>
}, ),
{ },
name: 'Metric Original Store', {
render: ( name: 'Metric Original Store',
<Suspense fallback={<span className="hidden">...</span>}> render: (
<LazyMetricStoreDevtools /> <Suspense fallback={<span className="hidden">...</span>}>
</Suspense> <LazyMetricStoreDevtools />
), </Suspense>
}, ),
]} },
/> ]}
</Suspense> />
</ClientOnly> </Suspense>
</ClientOnly>
</LazyErrorBoundary>
); );
}); });

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

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