[CAL-1769] embed: replace loading animation with skeleton

[PeerRich]

should be a skeleton of the embed instead. we can launch this with the new booking page @hariombalhara @JeroenReumkens

ideally also no layout shitf

_{From SyncLinear.com | CAL-1769}

[Ninad3721]

Can you tell me on which specific page the loader is shown instead of skeleton ?

[PeerRich]

its in the embed

[Ninad3721]

ok got it.

[riteshsp2000]

@PeerRich @alishaz-polymath @hariombalhara

I would like to work on this issue. I have gone through the designs and found the embed skeletons Could you please confirm if these are the appropriate ones? If so, I'll start creating/updating the required components.

[hariombalhara]

We need to understand first that the loader is there for the time the booker in the iframe isn't ready. AFAIR, we keep the embed iframe hidden(and the loader running) till the window load in iframe has happened.

We do that so that embed iframe's height has appropriately adjusted before showing it. Otherwise the situation can be that initially there is only 100px of content in the iframe and iframe's height is 100px and then some other content loads in a few milliseconds and it increases the height to 150px then iframe adjusts it's height to 150px. So, there would be multiple CLS happening on the page which doesn't look good. Note that, this is done because we don't want the scrollbar to ever appear in iframe as long as your viewport is big enough.

So, the loader is actually shown from T1 -> Tn time where T1 is when embed.js loads on the page and Tn is when window.load event fires in iframe. We should work towards moving Tn to some time earlier, ideally the time when iframe get's it first byte(after that the skeleton in iframe would be shown automatically).

Now, assuming that we have made that improvement we might not need this loader itself.

@riteshsp2000 if you would like you can try removing the style to hide the content from the iframe. https://github.com/calcom/cal.com/blob/main/apps/web/pages/_document.tsx#L55 Also, fire this linkReady event as early as possible so that the loader goes away as soon as possible. You can observe what happens in a few scenarios.

[riteshsp2000]

sure thing, I am on to it.

[gitstart-app[bot]]

Here is the GitStart Ticket for this issue: https://clients.gitstart.com/calcom/1/tickets/CALCOM-9116

[gitstart-calcom]

we tried a lot of ways to solve it and unfortunately, we didn't find a solution good enough to push