[Wallets] Sergei / Suggestion to avoid loading when the user switches between wallets

[sergei-deriv]

Changes:

Add keepPreviousData to useAuthorize hook. When the endpoint accounts_list will be created and separated from authorize request then we can move keepPreviousData property to the new hook.

You can read about keepPreviousData property here

Video:

[Desktop]

How it was:

Desktop.Loading.when.switching.between.wallets.mov

How it now:

Desktop.Without.loading.mov

[Responsive]

How it was:

Responsive.Loading.when.swithes.between.wallets.mov

How it now:

Responsive.Without.loading.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
deriv-app	✅ Ready (Inspect)	Visit Preview	Nov 2, 2023 11:02am

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

No Coverage information
3.7% Duplication

[github-actions]

A production App ID was automatically generated for this PR. (log)

• PR: [Wallets] Sergei / Suggestion to avoid loading when the user switches between wallets #11139
• URLs:
  • w/ App ID + Server: https://deriv-app-git-fork-sergei-deriv-sergei-suggestion-to-avo-12b8e9.binary.sx?qa_server=red.derivws.com&app_id=30366
  • Original: https://deriv-app-git-fork-sergei-deriv-sergei-suggestion-to-avo-12b8e9.binary.sx
• App ID: 30366

Click here to copy & paste above information.

- **PR**: [https://github.com/binary-com/deriv-app/pull/11139](https://github.com/binary-com/deriv-app/pull/11139)
- **URLs**:
    - **w/ App ID + Server**: https://deriv-app-git-fork-sergei-deriv-sergei-suggestion-to-avo-12b8e9.binary.sx?qa_server=red.derivws.com&app_id=30366
    - **Original**: https://deriv-app-git-fork-sergei-deriv-sergei-suggestion-to-avo-12b8e9.binary.sx
- **App ID**: `30366`

[github-actions]

🚀 Smoke test run (2) passed successfully!

[github-actions]

🚨 Lighthouse report for the changes in this PR:

Category	Score
🔺 Performance	15
🟧 Accessibility	75
🟢 Best practices	92
🟧 SEO	85
🟧 PWA	80

Lighthouse ran with https://deriv-app-git-fork-sergei-deriv-sergei-suggestion-to-avo-12b8e9.binary.sx/

[ghost]

does this have effects only on wallets, or is it used elsewhere too?

[sergei-deriv]

@wojciech-deriv as I know we are using useQuery just for wallets package now. Anyway, I'm pretty sure this keepPreviousData can't break anything, it's just for UI

[ghost]

could it cause a component to use stale data from previous authorisation e.g. while submitting a transfer, or reseting a balance, in case of new authorisation data being delayed/erorrer (e.g. poor network connection, which is common among our customers). E.g. lets say that navigation worked correctly and moved on to new route/component, but authorisation is still providing stale data from previous account.

I think best way to go would be to somehow explicitly support loading and error state - at least it ensures no weird edge cases.

[farhan-nurzi-deriv]

Had a thought to add this before, and farzin was saying better not to hide the actual problem. I think multiple authorization could solve this issue https://app.clickup.com/t/20696747/PLA-623

[sergei-deriv]

@wojciech-deriv Understood your point, didn't think about this before. I'm not sure it could be a problem in our project, but we don't need to risk. Anyway, we can add this property to the hook which works with account_list endpoint when it will be created by BE team, but for now maybe would be better leave it as it now.

@farhan-nurzi-deriv yeah, hope this issue will be solved by this solution, thank you!

realised some risks with that approach