bug: overlay components (except for popover and modal) are not reactive

[DaddyWarbucks]

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior: I am trying to create an IonLoading component that displays while an array of files is being uploaded. I want to display a message in the component such as Uploading ${fileNumber} of ${totalFiles}, such that the message will be "Uploading 1 of 3 files"..."Uploading 2 of 3 files", etc. But, the message prop is never updated while isOpen={true}, so once the component is open, I cannot update the message.

Expected behavior: The message prop would update while the component is open.

Related code:

https://codesandbox.io/s/loving-shannon-bf840?file=/src/App.js

import React from "react";
import { IonLoading } from "@ionic/react";
import "@ionic/react/css/core.css";
import "./styles.css";

export default class App extends React.Component {
  state = { file: 1, files: 5 };
  componentDidMount() {
    setInterval(() => {
      this.setState({ file: this.state.file + 1 });
    }, 1000);
  }
  render() {
    const { file, files } = this.state;
    const message = `Uploading ${file} of ${files}`;
    console.log(message);
    return (
      <div className="App">
        <IonLoading isOpen={true} message={message} />
      </div>
    );
  }
}

Other information:

Ionic info:

I am not running this app in IOS/Android. It is a basic create-react-app and does not (yet) use the CLI

[liamdebeasi]

Thanks, I can reproduce this. The issue is that components such as ion-alert, ion-action-sheet, ion-toast, and ion-loading are not reactive.

[mmcxii]

I'm encountering this issue as well, is there any progress?

[scott-augment]

Pretty frustrating bug, I am also having trouble with this. I'm very surprised that this isn't getting more attention, an updating message seems like a fairly standard use case.

To add to the described issue, I tried hacking around the problem with the following with no success:

if (longLoad) {
  return <IonLoading isTrue message="Long load message" />
}
return <IonLoading isTrue message="Short load message" />

[djdmbrwsk]

Any update? Or even a hacky work around for now? Having the same issue.

[acommend]

This issue and all issues relating to this seem to have been closed though I don't see any of the referenced issues in the change log for the latest release 6.3.4. Any update on this?

[liamdebeasi]

It looks like the issue author closed this thread. The issue has not been resolved yet, so I will reopen this.

[acommend]

Thank you

[liamdebeasi]

Hi everyone,

In Ionic 7.0 we will be adding inline functionality to our remaining overlays (alert, action sheet, loading, picker, and toast). As part of this, the properties on these components will be reactive when used inline (i.e. writing "<ion-loading> instead of using loadingController).

These changes will be available during a public beta period for Ionic 7 in the future. I am going to close this since the work required to fix this issue has been completed. Let me know if anyone has questions. Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.