search

saurabhdaware / bsky-widget

Unofficial Bluesky widget to render cute profile cards in your websites ^_^
https://bsky-widget.srbh.dev/
MIT License
59 stars 3 forks source link

[Feature]: Profile card skeleton loading #9

Open ParasSolanki opened 1 week ago

ParasSolanki commented 1 week ago

It would be nice to have a skeleton loading UI while we are fetching profile details.

saurabhdaware commented 1 week ago

I thought of that and had implemented it in earlier version though the tricky part is that we don't know height and width of the card before the data is fetched so we don't know how much space to reserve for that skeleton.

So when I had a loading screen earlier, it was causing very weird UX where loading screen is not in the same height / width as widget card so the card visually shifts.

People can define the height width on consumer-side too but that too might not be very accurate and its still an optional step.

Plus I checked API response time of bluesky's getProfile API and its fairly fast so if you have the card somewhere on lower folds, its unlikely that you'll ever see the loading state

ParasSolanki commented 1 week ago

Yeah, skeleton UI will be tricky in this case.

So when I had a loading screen earlier, it was causing very weird UX where loading screen is not in the same height / width as widget card so the card visually shifts.

The main issue will be from description cause we don't know how long it will be and it will cause jump which is not good.

Plus I checked API response time of bluesky's getProfile API and its fairly fast so if you have the card somewhere on lower folds, its unlikely that you'll ever see the loading state

image

They are caching it for 30 seconds which is not a lot but as you mentioned that there API is fast so widget will render very quickly.