make global modal lazy

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 (
+    <>
+      <InvitePeopleModal open={openInviteModal} onClose={closeInviteModal} />
+      <SupportModal formType={formType} onClose={closeContactSupportModal} />
+      <GlobalSearchModal />
+    </>
+  );
+};
+GlobalModals.displayName = 'GlobalModals';
+
+export default GlobalModals;

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 {
+import { toggleContactSupportModal } from '@/context/GlobalStore/useContactSupportModalStore';
-  closeContactSupportModal,
+import { toggleInviteModal } from '@/context/GlobalStore/useInviteModalStore';
-  toggleContactSupportModal,
-  useContactSupportModalStore,
-} from '@/context/GlobalStore/useContactSupportModalStore';
-import {
-  closeInviteModal,
-  toggleInviteModal,
-  useInviteModalStore,
-} from '@/context/GlobalStore/useInviteModalStore';
 import { cn } from '@/lib/classMerge';
-import { InvitePeopleModal } from '../../modals/InvitePeopleModal';
+import { LazyErrorBoundary } from '../../global/LazyErrorBoundary';
-import { SupportModal } from '../../modals/SupportModal';
+import { toggleGlobalSearch } from '../../search/GlobalSearchModal';
-import { GlobalSearchModal, 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}
       />
 
-      <GlobalModals />
+      <LazyErrorBoundary>
+        <Suspense fallback={null}>
+          <LazyGlobalModals />
+        </Suspense>
+      </LazyErrorBoundary>
     </>
   );
 });
@@ -270,20 +267,3 @@ const SidebarPrimaryHeader: React.FC<{ hideActions?: boolean }> = ({ hideActions
     </div>
   );
 };
-
-const GlobalModals = () => {
-  const { openInviteModal } = useInviteModalStore();
-  const isAnonymousUser = useIsAnonymousUser();
-  const { formType } = useContactSupportModalStore();
-
-  if (isAnonymousUser) return null;
-
-  return (
-    <>
-      <InvitePeopleModal open={openInviteModal} onClose={closeInviteModal} />
-      <SupportModal formType={formType} onClose={closeContactSupportModal} />
-      <GlobalSearchModal />
-    </>
-  );
-};
-GlobalModals.displayName = 'GlobalModals';