You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.tsxconstBannerContent=({ data })=>();// SitewideBanner.tsxconstContent=React.lazy(()=>import("./BannerContent.tsx");constSitewideBanner=()=>{const[{data, fetching}]=useQuery({..});if(!data||fetching)returnnull;return(<Suspensefallback={<Loading/>}<Content/></Suspense>);}
✅ Acceptance Criteria
Tiptap lazy loaded only when needed
Sitewide banner can still render rich text
The text was updated successfully, but these errors were encountered:
♻️ 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? 🤔
✅ Acceptance Criteria
The text was updated successfully, but these errors were encountered: