WaitObserver 📌

This component is used to do the following:

• WaitObserver a certain period of time before rendering a component

• Show timeout state, if the component is visible for a certain time period

A use case for this can be to show a loading state after waiting a certain period of time for data to load, and if the loading takes too long, show a timeout state.

System Component 📌

This component is shipped with BlueBase Core.

Usage

<WaitObserver
    delay={1000}
    timeout={3000}
    onTimeout={onTimeout}
    onRetry={onRetry}
    children={(props: WaitObserverChildrenProps) => <LoadingState {...props} />}
/>

Properties

prop	type	required	default	description
delay	number	no	-	Delay before rendering a component.
timeout	number	no	-	Timeout duration
onTimeout	Function	no	-	A callback function executed when a timeout occurs.
onRetry	Function	no	-	A callback function executed when retry method is called from the child component.
children	ReactNode | (() => ReactNode)	no	-
testID	string	no	-	Used to locate this view in end-to-end tests.