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 { 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 (
<Suspense fallback={<ErrorLoadingFallback />}>
<GlobalErrorCard {...props} />
</Suspense>
<LazyErrorBoundary>
<Suspense fallback={<ErrorLoadingFallback />}>
<GlobalErrorCard {...props} />
</Suspense>
</LazyErrorBoundary>
);
};
export const LazyCatchErrorCard = (error: Error) => {
return (
<Suspense fallback={<ErrorLoadingFallback />}>
<GlobalErrorCard error={error} reset={() => {}} />
</Suspense>
<LazyErrorBoundary>
<Suspense fallback={<ErrorLoadingFallback />}>
<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 { 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>
<Suspense fallback={<span className="hidden">...</span>}>
<NewTeamModal isOpen={isNewTeamModalOpen} onClose={onCloseNewTeamModal} />
</Suspense>
<LazyErrorBoundary>
<Suspense fallback={<span className="hidden">...</span>}>
<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 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,45 +86,47 @@ const TanstackDevtoolsImpl: React.FC = React.memo(() => {
}
return (
<ClientOnly>
<Suspense fallback={<span className="hidden">...</span>}>
<TanstackDevtools
config={{
position: 'bottom-left',
hideUntilHover: true,
defaultOpen: false,
openHotkey: ['Meta', 'D'],
triggerImage: randomImage,
}}
plugins={[
{
name: 'Tanstack Query',
render: (
<Suspense fallback={<span className="hidden">...</span>}>
<ReactQueryDevtoolsPanel />
</Suspense>
),
},
{
name: 'Tanstack Router',
render: (
<Suspense fallback={<span className="hidden">...</span>}>
<LazyTanStackRouterDevtoolsPanel />
</Suspense>
),
},
{
name: 'Metric Original Store',
render: (
<Suspense fallback={<span className="hidden">...</span>}>
<LazyMetricStoreDevtools />
</Suspense>
),
},
]}
/>
</Suspense>
</ClientOnly>
<LazyErrorBoundary>
<ClientOnly>
<Suspense fallback={<span className="hidden">...</span>}>
<TanstackDevtools
config={{
position: 'bottom-left',
hideUntilHover: true,
defaultOpen: false,
openHotkey: ['Meta', 'D'],
triggerImage: randomImage,
}}
plugins={[
{
name: 'Tanstack Query',
render: (
<Suspense fallback={<span className="hidden">...</span>}>
<ReactQueryDevtoolsPanel />
</Suspense>
),
},
{
name: 'Tanstack Router',
render: (
<Suspense fallback={<span className="hidden">...</span>}>
<LazyTanStackRouterDevtoolsPanel />
</Suspense>
),
},
{
name: 'Metric Original Store',
render: (
<Suspense fallback={<span className="hidden">...</span>}>
<LazyMetricStoreDevtools />
</Suspense>
),
},
]}
/>
</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 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>
<Suspense fallback={<span className="hidden">...</span>}>
<LazyTanstackDevtools />
</Suspense>
<LazyErrorBoundary>
<Suspense fallback={<span className="hidden">...</span>}>
<LazyTanstackDevtools />
</Suspense>
</LazyErrorBoundary>
</ClientOnly>
);
});