Skeleton component on timeline loading for better user experience #190

2023-02-02T01:26:59Z

leotuna commented

2023-02-02 01:26:59 +00:00

(Migrated from github.com)

Before 👇

After 👇

**Before 👇** ![skeleton_before](https://user-images.githubusercontent.com/42249244/216208285-f6f7a6cf-92b1-47a0-bfc7-40c4dd8c5271.gif) **After 👇** ![skeleton_after](https://user-images.githubusercontent.com/42249244/216208300-667e0ec9-b40f-4465-a333-7f4514fc8b29.gif)

❤️ 2

verbiricha commented

2023-02-02 07:16:53 +00:00

(Migrated from github.com)

Hey Leo, thanks for this. One problem I see though is that is only looking good in light mode, for dark mode looks too bright:

I also think it'd be great to give the skeletons the same border radius as the notes instead of being square.

Hey Leo, thanks for this. One problem I see though is that is only looking good in light mode, for dark mode looks too bright: <img width="1840" alt="Screenshot 2023-02-02 at 08 15 04" src="https://user-images.githubusercontent.com/92299987/216257076-e7211aaa-1ceb-45e8-8fc0-6f05a7a7c71f.png"> I also think it'd be great to give the skeletons the same border radius as the notes instead of being square.

leotuna commented

2023-02-05 14:13:56 +00:00

(Migrated from github.com)

What about now?

What about now? ![skeleton_2](https://user-images.githubusercontent.com/42249244/216824577-0c967d64-786e-4bbb-a09c-3e0548087718.gif)

Eiiki (Migrated from github.com) reviewed 2023-02-05 21:45:24 +00:00

Eiiki (Migrated from github.com) left a comment

Great initiative 🙌
I would suggest not passing the Skeleton as a child to the LoadMore component and just render it directly from it instead. I think it's safe as LoadMore is only rendered from the Timeline component so its only purpose should be to render the Skeleton.

Great initiative 🙌 I would suggest not passing the `Skeleton` as a child to the `LoadMore` component and just render it directly from it instead. I think it's safe as `LoadMore` is only rendered from the `Timeline` component so its only purpose should be to render the `Skeleton`.

leotuna commented

2023-02-06 11:38:04 +00:00

(Migrated from github.com)

Great initiative 🙌 I would suggest not passing the Skeleton as a child to the LoadMore component and just render it directly from it instead. I think it's safe as LoadMore is only rendered from the Timeline component so its only purpose should be to render the Skeleton.

Don't you think it should be reusable?

> Great initiative 🙌 I would suggest not passing the `Skeleton` as a child to the `LoadMore` component and just render it directly from it instead. I think it's safe as `LoadMore` is only rendered from the `Timeline` component so its only purpose should be to render the `Skeleton`. Don't you think it should be reusable?

v0l (Migrated from github.com) approved these changes 2023-02-06 19:03:54 +00:00

v0l (Migrated from github.com) left a comment

LGTM

Sign in to join this conversation.

No reviewers

v0l