The DelayedFallback component conditionally renders its children or a fallback component
based on the isReadyToRender prop. It waits for a specified delay (fallbackDelay)
before rendering the fallback component.
Remarks
If the duration of fetching data is shorter than the fallbackDelay value (default: 200ms),
the content is displayed without rendering the fallback. This can make it appear to the user
as if the content is displayed instantly.
Example
// Basic usage <DelayedFallbackisReadyToRender={isContentLoaded}fallback={<div>Loading...</div>}> <div>Content is ready!</div> </DelayedFallback>
// Custom delay <DelayedFallbackisReadyToRender={isContentLoaded}fallback={<div>Loading...</div>}fallbackDelay={500}> <div>Content is ready!</div> </DelayedFallback>
The DelayedFallback component conditionally renders its children or a fallback component based on the
isReadyToRenderprop. It waits for a specified delay (fallbackDelay) before rendering the fallback component.Remarks
If the duration of fetching data is shorter than the
fallbackDelayvalue (default: 200ms), the content is displayed without rendering the fallback. This can make it appear to the user as if the content is displayed instantly.Example