You want to lazy load two components in Remix: Header and Footer. You want to show a spinner while either loads. Which is the best way to implement this?
hard📝 Application Q15 of 15
Remix - Performance
You want to lazy load two components in Remix: Header and Footer. You want to show a spinner while either loads. Which is the best way to implement this?
AWrap each lazy component separately in its own Suspense with fallback spinner.
BLoad Header normally and lazy load Footer without Suspense.
CWrap both lazy components inside one Suspense with a single fallback spinner.
DLazy load both without Suspense; fallback is optional.
Step-by-Step Solution
Solution:
Step 1: Understand Suspense scope
Suspense can wrap multiple lazy components to show one fallback UI while any are loading.
Step 2: Compare options
Wrapping both in one Suspense is simpler and shows one spinner for both components loading.
Final Answer:
Wrap both lazy components inside one Suspense with a single fallback spinner. -> Option C
Quick Check:
One Suspense for multiple lazy components is best [OK]
Quick Trick:Use one Suspense to wrap multiple lazy components [OK]
Common Mistakes:
MISTAKES
Wrapping each lazy component in separate Suspense unnecessarily
Not using Suspense causing errors or no fallback UI
Loading lazy components without fallback UI
Master "Performance" in Remix
9 interactive learning modes - each teaches the same concept differently
