fix: show loading indicator until all data is fetched

[theborakompanioni]

as two requests are made in CurrentWallet component, a single boolean as loading flag might not represent the current loading state correctly. This commit adds a 'loading counter' that increases/decreases when starting/finishing data requests.

[dergigi]

Looks good to me ✅

[dennisreimann]

I've updated the loading counter to use the component state, so that it works on re-rendering. Can you check if it works as intended? If so, this is good to merge.

[theborakompanioni]

I've updated the loading counter to use the component state, so that it works on re-rendering. Can you check if it works as intended? If so, this is good to merge.

@dennisreimann I am trying to read up on re-rending in react. Thanks for the heads-up.
However, this change introduces very odd behavior - making non-stop network requests and freezing the browser.
No idea why that is, yet.. can it be that changing its own state in useCallback causes endless loops (rerender every time?)

[...]
[HPM] Error occurred while proxying request localhost:3000/api/v1/wallet/funded.jmdat/display to https://localhost:28183/ [ECONNRESET]

[dennisreimann]

@theborakompanioni you are correct, I removed my commit. However, then there are these warnings:

WARNING in src/components/CurrentWallet.jsx
  Line 21:9:  The 'startLoading' function makes the dependencies of useEffect Hook (at line 85) change on every render. To fix this, wrap the definition of 'startLoading' in its own useCallback() Hook  react-hooks/exhaustive-deps
  Line 26:9:  The 'stopLoading' function makes the dependencies of useEffect Hook (at line 58) change on every render. To fix this, wrap the definition of 'stopLoading' in its own useCallback() Hook    react-hooks/exhaustive-deps

But when those functions are added as dependencies, it is the same as with my commit. Will need to dig deeper myself :)

[ghost]

Maye Promise.all can help synchronizing both fetch calls? I can try it out if you guys want but I don't want to make this issue more complicated than it already is. Just let me know! 😄

[theborakompanioni]

I can try it out if you guys want but I don't want to make this issue more complicated than it already is. Just let me know! smile

I am not an expert in react - any help is highly appreciated. Such a simple issue seems perfect to learn best practices from you guys. 💪

[ghost]

I am not an expert in react - any help is highly appreciated. Such a simple issue seems perfect to learn best practices from you guys. 💪

I'm by all means no React expert. To be honest, I only ever did some smaller side projects but haven't worked on any large React projects professionally. So take everything I say and do with a massive grain of salt. I'm basically learning by doing. 😄

Since the two hooks seem to always be triggered together (same dependencies) I moved both fetch calls to a single useEffect hook and synced the two loads using the Promise.all API.

Everyone, let me know what you think, I think it works and I hope it makes sense. 🤞

[dergigi]

Looks good to me 👍

I just tested this and everything works as expected. I'll merge this now and if something is terribly wrong we can address it in another PR.