style: Add loading skeleton in userlist

[ramonlsouza]

What does this PR do?

Implements a loading skeleton in userlist component that appears in the initial loading of users, using React Loading Skeleton.

Motivation

Initial load might take a while if user connection is slow or if many users are in the meeting, and see "Users: 0" and an empty userlist might confuse users. The loading skeleton is an indicator that content is still loading.

screen-recording-2022-03-18_15.47.29.mp4

[tylercopeland]

@ramonlsouza great implementation!

A few small edit recommendations:

1 - Can we update the colour of the skeleton loader? I recommend we go with #DCE4EC
2 - Is it possible to match the spacing on the right-hand side with the left-hand side? That way, the skeleton visual isn't touching the edge of the side panel.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

No Coverage information
0.0% Duplication

[prlanzarin]

Suggestion (if feasible, otherwise ignore): make the number of skeleton items rendered be dynamic to a certain extent - eg render min(number_of_users, 10) skeleton users where 10 would be the max skeleton size (the current hardcoded value).

The rationale is that it's a bit inconsistent joining a meeting with ~3 people and have a skeleton user list with 10 skeleton users show up.

[ramonlsouza]

Suggestion (if feasible, otherwise ignore): make the number of skeleton items rendered be dynamic to a certain extent - eg render min(number_of_users, 10) skeleton users where 10 would be the max skeleton size (the current hardcoded value).

The rationale is that it's a bit inconsistent joining a meeting with ~3 people and have a skeleton user list with 10 skeleton users show up.

Thanks for the suggestion @prlanzarin! It would be a nice addition, but skeletons only appear when user data is being loaded for the first time (number_of_users is always zero when skeletons are active).