feat: Added skeleton loaders to Credentials Page

[HeidiHan0000]

• Added loading states to the Vaults page and the Credentials page according to designs found here
• Closes Update skeleton loaders for credential preview cards #943
• Closes Implement loading skeleton for vaults filter flyout #1352

Screen.Recording.2022-06-24.at.4.49.14.PM.mov

Vaults Page:

Screen.Recording.2022-06-24.at.12.00.29.PM.mov

Screen.Recording.2022-06-24.at.12.01.50.PM.mov

Credentials Page:

Screen.Recording.2022-06-24.at.12.04.51.PM.mov

Screen.Recording.2022-06-24.at.12.03.38.PM.mov

Signed-off-by: heidihan0000 [email protected]

[codecov]

Codecov Report

Merging #1745 (1e1f276) into main (866df70) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main    #1745   +/-   ##
=======================================
  Coverage   87.16%   87.16%           
=======================================
  Files          12       12           
  Lines        1356     1356           
=======================================
  Hits         1182     1182           
  Misses        104      104           
  Partials       70       70           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 866df70...1e1f276. Read the comment docs.

[birtony]

Nice progress! There is one thing I noticed on the first video - the loading state seems to turn off a bit too early. You can see that the default vault shows up right after the skeletons disappear, but the rest of the vaults still take time to show up. Could you investigate this, please? @HeidiHan0000

[talwinder50]

where is this isTall defined ?

[HeidiHan0000]

I defined it as a prop, set to false by default and passed in true for the Credential Details Page. On the Credential Details Page, isTall is true for any screen size. On the Credentials Page, isTall is only true for large screens (this is based on the designs)

[HeidiHan0000]

Comment from design team:
"Lots of loaders going on for data that hasn’t changed, this causes a very clunky and “slow” feeling experience.
Data that hasn't changed (vault cards, credential cards...) should be cached and should be quick to load."

Created #1746 to address this