♻️ Lazy load SitewideBanner

[esizer]

♻️ Debt/Refactor

We should probably lazy load the component only if the query returns something we can render.

🕵️ Details

Currently, we always load the SitewideBanner component. The issue is, it contains a very heavy library (tiptap ~200kb) that we load, regardless if we ever intend to use it. We should lazy load this component only if it contains data we can render.

🙋‍♀️ Proposed Solution

I'm not 100% confident but this this could work? 🤔

// BannerContent.tsx
const BannerContent = ({ data }) => ();

// SitewideBanner.tsx
const Content = React.lazy(() => import("./BannerContent.tsx");

const SitewideBanner = () => {
  const [{data, fetching}] = useQuery({ .. });
  
  if(!data || fetching) return null;
  
  return (
     <Suspense fallback={<Loading />}
        <Content />
     </Suspense>
  );
}

✅ Acceptance Criteria

• Tiptap lazy loaded only when needed
• Sitewide banner can still render rich text