React Native - Delay between changing bottom tabs - reactjs

Question

I have used react navigation's "createBottomTabNavigator" in one of my projects.
const Tab = createBottomTabNavigator();
</Tab.Navigator>
................
<Tab.Screen name="Cart" component={Cart} />
{configuration.paymentProviders.length > 0 && (
<Tab.Screen name="Payment" component={Payment} />
)}
</Tab.Navigator>
My problem is this:
If I switch between two tabs quickly, after a while, the render cannot work properly because it tries to perform the operation without getting a response from the API.
For this, I added setLoading(true) to the API request and did not set it to false until the request was finished, but I still have the same problem, although it is better.
So, I want to give a half-second pause between tabs, do you have any suggestions for this?

Answer 1

When you switch the tabs, you use somthing like onClick() right? Here is old question for the solution as setTimeout. It gives you the ability to delay before the code gets executed. But I advice you do disable all other buttons, before you get a response. This also means that you need to be sure that response will come, at least timeout, then you can enable buttons again.
A better option might be to consider not delaying the process but just simply disabling all buttons which have onClick functionality, to prevent too many requests. This is an example of disabling something, doesn't neccessarely needs to be a button.
export default function App() {
const [clicked, setClicked] = React.useState(false);
//fake request, just delaying things
function handleClick() {
setClicked(true); // disable all buttons if clicked
setTimeout(() => {
setClicked(false);
}, 2000);
}
useEffect(() => {
console.log(clicked);
}, [clicked]);
return (
<div className="App">
<button onClick={!clicked ? handleClick : undefined}>1</button>
<button onClick={!clicked ? handleClick : undefined}>2</button>
</div>
);
}