Add a loading indicator to Profile when loading data #1753

ramirotw · 2021-11-02T11:50:56Z

Summary

This adds a loading indicator to Profile page labels using the shimmer effect. It also sets an interval to fetch profile data each 5 minutes.

To Test

Connect wallet and open /profile page
Labels should glow while profile is loading
Wait 5 minutes to validate profile data is fetched again

github-actions · 2021-11-02T12:00:24Z

🔭 GP Swap: Gnosis Protocol v2 Swap UI

elena-zh · 2021-11-02T12:56:00Z

Hey @ramirotw , cool changes.
However, loading effect is so quick, that it seems like blinking again.
Could we add at least 2 sec of shimmering effect to make it noticeable (something like this https://codepen.io/andru255/pen/wvBdxbb , but for elements only) ?
See the video: when data is reloading, it shows dashes instead of numbers/date (23-26 sec of the video).

ramirotw · 2021-11-02T14:25:06Z

See the video: when data is reloading, it shows dashes instead of numbers/date (23-26 sec of the video).

@elena-zh is it possible that the video link you referred to wasn't pasted?

elena-zh · 2021-11-02T14:27:10Z

@ramirotw , yes, it appeared to be so.
Here it is https://watch.screencastify.com/v/s3YkMOFKbn1HokZA89YN

Sorry about that :(

alfetopito · 2021-11-02T21:47:27Z

src/custom/hooks/useFetchProfile.ts

+
+const emptyState: FetchProfileState = {
+  profileData: null,
+  //error: '',


I left that commented to hint Henry to put there the error in #1745

alfetopito · 2021-11-02T21:57:23Z

src/custom/hooks/useFetchProfile.ts

+        setProfile({ ...emptyState, isLoading: true })
        const profileData = await getProfileData(chainId, account)
-        setProfileData(profileData)
+        setProfile({ ...emptyState, isLoading: false, profileData })


Any reason to reset the state on every load?

I would prefer to have the old value visible while it's loading

Yes, good point, it even added an annoying flash between the dash and the value while loading

anxolin · 2021-11-03T10:20:31Z

Since we are deploying today, and this one has unaddressed issues, I will leave this one out.

We will be able to repoint this PR to develop branch later, please don't merge to the release/1.4.0 after we close the version

ramirotw · 2021-11-03T16:25:07Z

See the video: when data is reloading, it shows dashes instead of numbers/date

Please re-test, this issue should be fixed. Later on if I find a suitable solution to delay the shimmer effect at the end I'll include it.

ramirotw · 2021-11-03T16:38:08Z

The build is failing due to an unrelated change:

src/custom/pages/games/CowRunner/index.tsx
Line 4:10: 'useWalletInfo' is defined but never used @typescript-eslint/no-unused-vars

alfetopito · 2021-11-03T18:27:48Z

The build is failing due to an unrelated change:

src/custom/pages/games/CowRunner/index.tsx
Line 4:10: 'useWalletInfo' is defined but never used @typescript-eslint/no-unused-vars

Same thing that happened to @henrypalacios 's PR yesterday.

Couldn't find what was causing it but I assume it was a cache issue with the stored dependencies.

Will see if I can find out more about it.

alfetopito · 2021-11-03T21:44:05Z

The build is failing due to an unrelated change:

src/custom/pages/games/CowRunner/index.tsx
Line 4:10: 'useWalletInfo' is defined but never used @typescript-eslint/no-unused-vars

Same thing that happened to @henrypalacios 's PR yesterday.

Couldn't find what was causing it but I assume it was a cache issue with the stored dependencies.

Will see if I can find out more about it.

In the case of this branch, it does indeed have the "broken" code

cowswap/src/custom/pages/games/CowRunner/index.tsx

Line 4 in 926a440

import { useWalletInfo } from '@src/custom/hooks/useWalletInfo'

And it is present on develop https://github.com/gnosis/cowswap/blob/develop/src/custom/pages/games/CowRunner/index.tsx

But it's not on master (https://github.com/gnosis/cowswap/blob/master/src/custom/pages/games/CowRunner/index.tsx) nor on release/1.4.0 (https://github.com/gnosis/cowswap/blob/release/1.4.0/src/custom/pages/games/CowRunner/index.tsx)

Probably a bad merge.

I'll send a PR to develop to fix it.

alfetopito · 2021-11-03T22:35:06Z

@ramirotw this PR should have fixed it #1770
I already merged it to develop

…2-profile-loader

…s/cowswap into ramirotw/issue-1632-profile-loader

elena-zh · 2021-11-04T10:55:41Z

Hey @ramirotw , I do not see a loading effect each 5 minutes when a profile data is updated...
In addition, some new issues:

There is no 'loading' effect when we change accounts (it was described in the main part of Profile: add a loader when user details are updated #1632 task)
There is no 'loading' effect when we connect a wallet, a data is loaded
When a profile's data loading fails, I see an eternal loading effect. Since we are going to show an error message for this case, I see no point in showing a loading effect for 5 minutes until the next page update/user's manual update.
https://watch.screencastify.com/v/A06UhEQh0j81wAPiMNWh

ramirotw · 2021-11-04T11:21:08Z

1. There is no 'loading' effect when we change accounts (it was described in the main part of Profile: add a loader when user details are updated #1632 task)
2. There is no 'loading' effect when we connect a wallet, a data is loaded

That's weird, I'm testing on https://pr1753--gpswapui.review.gnosisdev.com/#/profile and locally and I can see the shimmer effect, since the API responds quickly it doesn't take that long before the effect ends though.

3. When a profile's data loading fails, I see an eternal loading effect. Since we are going to show an error message for this case, I see no point in showing a loading effect for 5 minutes until the next page update/user's manual update.
https://watch.screencastify.com/v/A06UhEQh0j81wAPiMNWh

I have added an error catch to turn off the loader

elena-zh · 2021-11-04T12:08:11Z

Thanks, @ramirotw , I have simulated a slow 3g connection and was able to see the loading effect on accounts changing/data updating.
Loading effect after the error is also removed.

elena-zh · 2021-11-04T12:12:48Z

@ramirotw , I have created a separate task #1778 for you to make a 'loading' effect a bit longer

* add shimmer effect when loading profile data * add a 5 minutes interval to profile fetch * do not reset previous profileData * Fix code style issues with Prettier * add loader to profile trades/referrals values * cancel loading when fetch fails Co-authored-by: Lint Action <[email protected]>

ramirotw added the Protofire Handled by Protofire development team label Nov 2, 2021

ramirotw requested review from alfetopito and elena-zh November 2, 2021 11:50

henrypalacios added a commit that referenced this pull request Nov 2, 2021

Adding profileState of #1753

0ae32f3

alfetopito reviewed Nov 2, 2021

View reviewed changes

elena-zh mentioned this pull request Nov 3, 2021

Adding errorState in useFetchProfile #1745

Merged

ramirotw added 3 commits November 3, 2021 11:22

add shimmer effect when loading profile data

8f40e21

add a 5 minutes interval to profile fetch

db3a051

do not reset previous profileData

c003bec

ramirotw force-pushed the ramirotw/issue-1632-profile-loader branch from fdd5a6a to c003bec Compare November 3, 2021 16:20

ramirotw changed the base branch from release/1.4.0 to develop November 3, 2021 16:20

Fix code style issues with Prettier

b413007

add loader to profile trades/referrals values

8d131c9

alfetopito mentioned this pull request Nov 3, 2021

Removed unused import breaking the build #1770

Merged

ramirotw added 2 commits November 3, 2021 20:46

Merge remote-tracking branch 'origin/develop' into ramirotw/issue-163…

7a72b80

…2-profile-loader

Merge branch 'ramirotw/issue-1632-profile-loader' of github.com:gnosi…

180646f

…s/cowswap into ramirotw/issue-1632-profile-loader

cancel loading when fetch fails

e4b8deb

elena-zh approved these changes Nov 4, 2021

View reviewed changes

elena-zh mentioned this pull request Nov 4, 2021

[Profile] add a longer 'loading' effect when data is loaded #1778

Closed

alfetopito approved these changes Nov 4, 2021

View reviewed changes

ramirotw merged commit 1ba6f4c into develop Nov 5, 2021

ramirotw deleted the ramirotw/issue-1632-profile-loader branch November 5, 2021 13:49

ramirotw mentioned this pull request Nov 10, 2021

[RELEASE] 1.4.2 #1813

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add a loading indicator to Profile when loading data #1753

Add a loading indicator to Profile when loading data #1753

ramirotw commented Nov 2, 2021

github-actions bot commented Nov 2, 2021

elena-zh commented Nov 2, 2021

ramirotw commented Nov 2, 2021

elena-zh commented Nov 2, 2021

alfetopito Nov 2, 2021

ramirotw Nov 3, 2021

alfetopito Nov 2, 2021

ramirotw Nov 3, 2021

anxolin commented Nov 3, 2021

ramirotw commented Nov 3, 2021

ramirotw commented Nov 3, 2021

alfetopito commented Nov 3, 2021

alfetopito commented Nov 3, 2021

alfetopito commented Nov 3, 2021

elena-zh commented Nov 4, 2021

ramirotw commented Nov 4, 2021

elena-zh commented Nov 4, 2021

elena-zh commented Nov 4, 2021

Add a loading indicator to Profile when loading data #1753

Add a loading indicator to Profile when loading data #1753

Conversation

ramirotw commented Nov 2, 2021

Summary

To Test

github-actions bot commented Nov 2, 2021

elena-zh commented Nov 2, 2021

ramirotw commented Nov 2, 2021

elena-zh commented Nov 2, 2021

alfetopito Nov 2, 2021

Choose a reason for hiding this comment

ramirotw Nov 3, 2021

Choose a reason for hiding this comment

alfetopito Nov 2, 2021

Choose a reason for hiding this comment

ramirotw Nov 3, 2021

Choose a reason for hiding this comment

anxolin commented Nov 3, 2021

ramirotw commented Nov 3, 2021

ramirotw commented Nov 3, 2021

alfetopito commented Nov 3, 2021

alfetopito commented Nov 3, 2021

alfetopito commented Nov 3, 2021

elena-zh commented Nov 4, 2021

ramirotw commented Nov 4, 2021

elena-zh commented Nov 4, 2021

elena-zh commented Nov 4, 2021