diff --git a/apps/web/src/components/features/sidebars/SidebarPrimary/PrimaryGlobalModals.tsx b/apps/web/src/components/features/sidebars/SidebarPrimary/PrimaryGlobalModals.tsx
new file mode 100644
index 000000000..7848a2783
--- /dev/null
+++ b/apps/web/src/components/features/sidebars/SidebarPrimary/PrimaryGlobalModals.tsx
@@ -0,0 +1,28 @@
+import { useIsAnonymousUser } from '@/api/buster_rest/users/useGetUserInfo';
+import { InvitePeopleModal } from '@/components/features/modals/InvitePeopleModal';
+import { SupportModal } from '@/components/features/modals/SupportModal';
+import { GlobalSearchModal } from '@/components/features/search/GlobalSearchModal';
+import {
+ closeContactSupportModal,
+ useContactSupportModalStore,
+} from '@/context/GlobalStore/useContactSupportModalStore';
+import { closeInviteModal, useInviteModalStore } from '@/context/GlobalStore/useInviteModalStore';
+
+const GlobalModals = () => {
+ const { openInviteModal } = useInviteModalStore();
+ const isAnonymousUser = useIsAnonymousUser();
+ const { formType } = useContactSupportModalStore();
+
+ if (isAnonymousUser) return null;
+
+ return (
+ <>
+
+
+
+ >
+ );
+};
+GlobalModals.displayName = 'GlobalModals';
+
+export default GlobalModals;
diff --git a/apps/web/src/components/features/sidebars/SidebarPrimary/SidebarPrimary.tsx b/apps/web/src/components/features/sidebars/SidebarPrimary/SidebarPrimary.tsx
index 8786a9bd9..96171c297 100644
--- a/apps/web/src/components/features/sidebars/SidebarPrimary/SidebarPrimary.tsx
+++ b/apps/web/src/components/features/sidebars/SidebarPrimary/SidebarPrimary.tsx
@@ -1,6 +1,6 @@
import type { AssetType } from '@buster/server-shared/assets';
import { Link, useNavigate } from '@tanstack/react-router';
-import React, { useMemo } from 'react';
+import React, { lazy, Suspense, useMemo } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import {
useIsAnonymousUser,
@@ -31,23 +31,16 @@ import {
} from '@/components/ui/sidebar/create-sidebar-item';
import { Sidebar } from '@/components/ui/sidebar/SidebarComponent';
import { Tooltip } from '@/components/ui/tooltip/Tooltip';
-import {
- closeContactSupportModal,
- toggleContactSupportModal,
- useContactSupportModalStore,
-} from '@/context/GlobalStore/useContactSupportModalStore';
-import {
- closeInviteModal,
- toggleInviteModal,
- useInviteModalStore,
-} from '@/context/GlobalStore/useInviteModalStore';
+import { toggleContactSupportModal } from '@/context/GlobalStore/useContactSupportModalStore';
+import { toggleInviteModal } from '@/context/GlobalStore/useInviteModalStore';
import { cn } from '@/lib/classMerge';
-import { InvitePeopleModal } from '../../modals/InvitePeopleModal';
-import { SupportModal } from '../../modals/SupportModal';
-import { GlobalSearchModal, toggleGlobalSearch } from '../../search/GlobalSearchModal';
+import { LazyErrorBoundary } from '../../global/LazyErrorBoundary';
+import { toggleGlobalSearch } from '../../search/GlobalSearchModal';
import { SidebarUserFooter } from '../SidebarUserFooter';
import { useFavoriteSidebarPanel } from './useFavoritesSidebarPanel';
+const LazyGlobalModals = lazy(() => import('./PrimaryGlobalModals'));
+
const topItems: ISidebarList = createSidebarList({
id: 'top-items',
items: [
@@ -222,7 +215,11 @@ export const SidebarPrimary = React.memo(() => {
useCollapsible={isUserRegistered}
/>
-
+
+
+
+
+
>
);
});
@@ -270,20 +267,3 @@ const SidebarPrimaryHeader: React.FC<{ hideActions?: boolean }> = ({ hideActions
);
};
-
-const GlobalModals = () => {
- const { openInviteModal } = useInviteModalStore();
- const isAnonymousUser = useIsAnonymousUser();
- const { formType } = useContactSupportModalStore();
-
- if (isAnonymousUser) return null;
-
- return (
- <>
-
-
-
- >
- );
-};
-GlobalModals.displayName = 'GlobalModals';