How to update the frontend about the canister call state?


I have an update call that goes to transfer ICP, create a canister, update the canister code and upload some frontend assets.

Although each of the operations does not take much time, the call that has to do all 4 operations takes around 40 to 60 seconds.

I’m looking for ways to show to the user the state of the call and keep them informed. For instance, “Transferring ICP” “Creating canister” “Installing code” and “Uploading assets”.

I tried the following:

  1. Update a canister variable and query the state every 3-5 second from the frontend. Although this works with a local replica it does not worked in mainnet.

  2. Use HTTP streaming to receive updates in the frontend as while updating the state of the canister. This works when called with HTTP and I’m wondering if there’s a way to use the Plug wallet to perform such call while at the same time verifying the caller’s identity.

  3. Create a second canister and use it to do async update calls to store the state there. Then query the second canister to get the intermediate state of call. This should work in theory but has the drawback of requiring extra async update calls. These calls would increase the original call duration significantly.

  4. Use a timer in the frontend and show each state at a fixed time. For example, show “Transferring ICP” at 10s “Creating canister” at 20s “Installing code” at 30s and “Uploading assets” at 40s.

At this point, I’m out of good options (options 1 and 2) and will probably go with option 4.

Anyone go any insights or ideas on getting the canister state before a call finishes? Or insights implementing any of the methods described above?