Update/change message in IonLoading after a period of time

Ionic Framework Ionic React
#1

I’ve created a custom component that returns IonLoading alert using:

<ConnectingAlert loading={loading} />

where loading is set using useState.

The component returns an IonLoading (alert) component with a defined message for a defined period of time that looks something like this:

return (
<IonLoading
  isOpen={loading}
  message={"<br/>Message Goes Here<br/><br/>"}
  duration={60000}
/>

)

Since this alert displays for a period of time whilst some background stuff happens, I’d like to improve the UX by updating the message over time. As a result my custom component looks like this:

import React, { useEffect, useState } from "react";
import {
  IonLoading
} from "@ionic/react";


interface ContainerProps {
  loading: boolean
}

const ConnectingAlert: React.FC<ContainerProps> = ({ loading }) => {
  const fruits = [
    { id: 1, name: "Orange", duration: 2000 },
    { id: 2, name: "Kiwi", duration: 1000 },
    { id: 3, name: "Mango", duration: 3000 },
  ]

  const [index, setIndex] = useState(0);
  const [currentFruit, setCurrentFruit] = useState(fruits[index]);

  useEffect(() => {
    setCurrentFruit(fruits[index]);
    console.log("INDEX CHANGED: " + currentFruit.name);
  }, [index])

  useEffect(() => {
    const interval = setTimeout(() => {
      setIndex(index === fruits.length - 1 ? 0 : index + 1)
    }, currentFruit.duration);
    console.log("FRUIT CHANGED: " + currentFruit.name + " / " + currentFruit.duration);
  }, [currentFruit])

  return (
    <IonLoading
      isOpen={loading}
      message={"<br/>" + currentFruit.name + "<br/><br/>"}
      duration={60000}
    />
  )
}

export default ConnectingAlert;

I can see from the console that the selected message is being updated and the duration is being honoured before the next console output is fired. However, the IonLoading displayed on screen only ever displays the message that was active at the instant the alert was displayed.

How can I update my code to get the IonLoading message to update over time?

Thanks

#2

If you have multiple queries that you are waiting on, one simple solution is to have a different IonLoading for each query and then nest the components like this:

<ComponentWithLoadingOrange>
  <ComponentWithLoadingKiwi>
    <ComponentWithLoadingMango />
  </ComponentWithLoadingKiwi>
</ComponentWithLoadingOrange>

This will automatically switch to the next loading message as the queries complete.