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

wrap more suspense in lazy boundary

This commit is contained in:
Nate Kelley 2025-09-25 08:05:59 -06:00
parent 70e0e0c86d
commit 32046037c0
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
4 changed files with 65 additions and 51 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>
); );
}; };

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>
); );
}); });