Clear w/l display on player page switch

[jeyren95]

Cause of issue:

• the "getPlayerWinLoss" API is being called while navigating between player profiles
• however, the "playerWinLoss.loading" state is not being checked while rendering the components

Proposed changes:

• added a check for "playerWinLoss.loading"
• placed the above check inside "PlayerHeader" component because the component relies on data sets from 2 individual APIs
• this is to prevent different portions of the component from displaying the desired content at different speeds

fixes #3148

[howardchung]

I think we can achieve this without changing to link elements. Note that when navigating player profile to player profile, the matches, heroes, and peers show a loader without a page refresh. We want to achieve the same thing for the W/L number.

[jeyren95]

i see, ok after digging deeper, i managed to find the cause of the issue, and a (probably) better solution. Updated the PR! Please help to take a look, thanks Howard!

[howardchung]

I don't think this file needs to be modified?

[jeyren95]

my bad, forgot to remove while testing some stuff, thanks for spotting

[howardchung]

Thanks! This is definitely better--ideally we would only show a separate loading state for the win loss section since that tends to load a little slower than the profile info, but that's not required

[jeyren95]

hmmm yeah, actually if you want to show a separate loading state for the win loss section, i could just remove the extra condition in the "PlayerHeader" component.

But my initial thought was that it would be more UI-friendly to load the entire component together rather than seeing portions of it loading separately.

What dyou think?

[howardchung]

I think we should show a loader only for the w/l data. If the name/picture etc. are available first there's no reason to block on it.

[jeyren95]

ok done, have removed the extra condition

[howardchung]

Looks good! I guess we can leave for a future item improving the loader apperance (maybe a shimmer instead of a spinner) and left align it.