⌛ Improve loading with Skeleton Loading

[Bonapara]

Desired Behavior

We aim to improve page loading by adding more skeleton loading.

Here is the desired behaviors:

Table indexes

Screen.Recording.2024-03-13.at.16.46.15.mov

Kanban indexes

Screen.Recording.2024-03-13.at.16.47.43.mov

Shows

Screen.Recording.2024-03-13.at.16.48.39.mov

Tasks

Preview Give feedback

1. User & Metadata Loading #4456
   scope: front size: short +2
   
2. Prefetch Skeleton Loading on Indexes and Shows #4458
   scope: front size: short +2
   
3. Data Skeleton Loading on Indexes #4459
   scope: front size: short +2
   
4. Show Data Skeleton Loading #4460
   scope: front size: short +2
   

[charlesBochet]

Hints for technical part:

• look at the XHR queries, you'll see:

1. ClientConfig + CurrentUser + Metadata
2. Prefetch
3. Other data queries

• look at index.tsx, you'll see:

1. ClientConfigProvider, UserProvider, MetadataProvider
2. PrefetchProvider
3. Layout and rest of the app

On the figmas, you'll see different loading state corresponding to these 1, 2, 3 steps

➡️ I think it's better to do one loading state in a first PR so we can discuss technical implementation before you go to all of them ⬅️

[saadfrhan]

Hi, I will try to solve this issue.

[Bonapara]

Hi @saadfrhan, thanks for your contribution. Please tag me in the sub-issues you'd like to address, so I can assign them to you!

[saadfrhan]

@Bonapara, Can you assign me to all of them?

[Bonapara]

@saadfrhan, please comment on them since I cannot assign you directly.

[saadfrhan]

Oh my bad. Okay

[Bonapara]

@saadfrhan, my apologies, I overlooked that the sub-issues were already assigned.

[saadfrhan]

No problem. 🙌

[saadfrhan]

Hi @Bonapara 👋, can you assign me to one of the sub-issues?

[Bonapara]

Hi @saadfrhan, unfortunately, as I mentioned earlier, those tasks have already been assigned. Maybe would you like to pick another one?

[saadfrhan]

Oh ok. Thanks!

[FelixMalfait]

@saadfrhan thanks and sorry for the confusion! This is a fairly big issue so make sure to break it into 1 first PR and ping us on Discord if you need intermediate feedback. @Bonapara will be happy to support you if there are design considerations

[saadfrhan]

Ok. Thanks @FelixMalfait!

[saadfrhan]

Sorry, I am unassigning myself because I am failing to do it.

[charlesBochet]

Ok no worries :) thanks for taking a look

[gitstart-app]

Here is the GitStart Ticket for this issue: https://clients.gitstart.com/twenty/5449/tickets/TWNTY-4462