useWaitTask
Wraps an async function to show the global loader overlay while it runs and handle errors via interactiveError.
Usage
tsx
import { useWaitTask } from '@zyno-io/mobile-foundation-rn';
function MyComponent() {
const submitForm = useWaitTask(async (data: FormData) => {
const result = await api.submit(data);
return result;
});
return <MfButton text="Submit" onPress={() => submitForm(formData)} />;
}With Custom Logger
tsx
import { useWaitTask, createLogger } from '@zyno-io/mobile-foundation-rn';
const logger = createLogger('checkout');
function CheckoutScreen() {
const processPayment = useWaitTask(logger, async (amount: number) => {
await paymentApi.charge(amount);
});
return <MfButton text="Pay" primary onPress={() => processPayment(99)} />;
}Overloads
ts
useWaitTask(fn: (...args) => Promise<R>): (...args) => Promise<R | undefined>
useWaitTask(logger: Logger, fn: (...args) => Promise<R>): (...args) => Promise<R | undefined>Behavior
- Increments
LoaderState.loaderCount(showsGlobalLoaderOverlay) - Calls the wrapped async function
- Decrements
LoaderState.loaderCount(hides overlay when all tasks complete) - On success: returns the result
- On error: calls
logger.interactiveError(err)and returnsundefined
Multiple concurrent useWaitTask calls stack — the overlay stays visible until all complete.