ios – Subject: QR Code Scanner Modal with Persistent Loading State

I am implementing a React Native utility with a QR code scanner that opens in a modal popup. The workflow entails:

Opening the QR scanner in a modal
Studying the QR code knowledge
Making an API name to fetch related info
Displaying the outcomes

Present Downside:
Sometimes, the loading indicator stays seen indefinitely, even after the API response is obtained. This implies a possible difficulty with state administration or the loading state not being correctly reset.
Anticipated Conduct:
The loader ought to disappear as soon as the API name completes (both efficiently or with an error), and the suitable content material needs to be exhibited to the person.

  if (loading) return; // stop double submit
  setLoading(true);
  Keyboard.dismiss();

  // Fallback timeout: forcibly flip off loading after 15 seconds
  const loadingTimeout = setTimeout(() => {
    console.warn('handleSubmit loader pressure stopped after 15 seconds');
    setLoading(false);
  }, 15000);

  const formData = new FormData();
  formData.append(
    "authcode",
    "jXn2r5u8x/A?D(G+KaPdSgVkYp3s6v9y$B&E)H@McQeThWmZq4t7w!zpercentC*F-JaNd"
  );
  formData.append("signid", signIdQR || signId);

  if (timeoutRef.present) {
    clearTimeout(timeoutRef.present);
  }

  strive {
    console.log('handleSubmit began - loading ON');
    const res: any = await dispatch(getSignDetailsAPIAction(formData));
    if (res) {
      setResult(res);
      timeoutRef.present = setTimeout(() => {
        clearDefault();
      }, 10000);
    } else {
      clearDefault();
      Alert.alert("Data", "No outcomes discovered!");
    }
  } catch (err) {
    console.error('Error fetching signal particulars:', err);
    clearDefault();
    Alert.alert("Data", "No outcomes discovered!");
  } lastly {
    clearTimeout(loadingTimeout);
    setLoading(false);
    console.log('handleSubmit completed - loading OFF');
  }
};