mirror of https://github.com/buster-so/buster.git
35 lines
973 B
TypeScript
35 lines
973 B
TypeScript
import type { ErrorRouteComponent } from '@tanstack/react-router';
|
|
import { lazy, Suspense, useEffect, useState } from 'react';
|
|
|
|
// Lazy load the GlobalErrorCard component
|
|
const GlobalErrorCard = lazy(() =>
|
|
import('./GlobalErrorCard').then((module) => ({
|
|
default: module.GlobalErrorCard,
|
|
}))
|
|
);
|
|
|
|
// Fallback component while loading
|
|
const ErrorLoadingFallback = () => <div />;
|
|
|
|
// Wrapper component that handles lazy loading with Suspense
|
|
export const LazyGlobalErrorCard: ErrorRouteComponent = (props) => {
|
|
// Track if we're on the client side
|
|
const [isClient, setIsClient] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Set to true only after mount (client-side only)
|
|
setIsClient(true);
|
|
}, []);
|
|
|
|
// During SSR, render the fallback directly to avoid hydration mismatch
|
|
if (!isClient) {
|
|
return <ErrorLoadingFallback />;
|
|
}
|
|
|
|
return (
|
|
<Suspense fallback={<ErrorLoadingFallback />}>
|
|
<GlobalErrorCard {...props} />
|
|
</Suspense>
|
|
);
|
|
};
|