feat: Added a Ghost UI screen

[mananjadhav]

Details

• Adds a background screen with shimmer animation, when the chat is loading
• It also adds an additional dependency react-content-loader for SVG based animation on components.

Fixed Issues

$ #7081

Tests

• Verify that no errors appear in the JS console

QA Steps

• Verify that no errors appear in the JS console

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Mobile Web

Desktop

iOS

Android

[mananjadhav]

@Luke9389 @parasharrajat, can you help me verify the loader condition. It seems that what I am using for the initial load is incorrect.

I have attached two screens for Ghost UI on Mobile as well as Web for reference.
https://user-images.githubusercontent.com/3069065/155564261-46fbbdcc-50ea-4a0a-92ef-84927b1680f3.mov

But when it transitions from Ghost screen to the chats, it switches one chat at a time, so I am guessing I am using an incorrect flag for the loader. Following is the attached ref video.

transition-bug.mov

[parasharrajat]

This Onyx key is updated multiple times during the app cycle. So maybe just create a state and update that only once when this is true. I don't know much about this.

[Luke9389]

@mananjadhav did you close this intentionally? If so would you be willing to post your reason (can be brief). Just easier for everyone to follow. I see there's another PR. You can always link to that here as well.

Other PR: #8042

[mananjadhav]

Yeah @Luke9389. I closed the old PR because it didn’t have the new PR template checklist. Raised a fresh one with the same changes here #8042