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';