Add a Loading Indicator for Image Manipulation

[Technickel-Dev]

Currently there is no visual feedback for when the image manipulation is taking place. Instead, the UI just freezes up while it does its thing which is poor UX.

It would be awesome to pop a spinner up on all 5 preview squares to let the user know the program is working its magic. The loading spinner already exists as a component and can be reused for this purpose!

[nalin-singh]

I would like to work on this enhancement issue. Would you please assign it to me?

[Technickel-Dev]

Assigned! Thanks for the help!

[nalin-singh]

Is there a channel where we can talk more about this ? I had some doubts while working

[Technickel-Dev]

I don't have anything official, though I'm open to jumping on a chat / call or talking it out here if you'd like! What doubts do you have?

[nalin-singh]

I was looking through the code I understand it now only thing I'm having a little trouble deciding how do I get the response to stop displaying the loader and display the image on those panels. I was thinking about componentDidMount, I'm still a freshie in this so any hints would be helpful. Also my twitter is @_singhnalin if you want to connect over there.

[Technickel-Dev]

I think that componentDidMount is definitely one way to do it, but it would require you to trigger a re-render of the component when you want things to happen which sounds a bit over the top. To be honest, I am also a React newbie (this is my first real React project haha!)

My suggestion would be to tap into the logic for the drawCallback. After the debounce but before the processing starts you can set a state that starts the loading components. This state can either be local and passed around or put into the Zustand store. When the processing is finished in, the "then" portion of the promise, you can then update the state to stop the spinners.

drawCallback={debounce(() => {
                removeBackground(
                  cv,
                  "canvas-input",
                  "canvas-draw-layer",
                  "canvas-removed-background",
                  () => {
                    hexagonify(
                      cv,
                      blurKernal,
                      "canvas-removed-background",
                      "canvas-thresh",
                      "canvas-output"
                    ).then((dataPath) => {
                      setDataPath(dataPath);
                    });
                  }
                );
              }, 1500)}

[Technickel-Dev]

Hey @nalin-singh, it's been some time now so going to un-assign you in case someone else wants to give it a try. If you're still interested feel free to PR something!