Page loading is not smooth

[rrjanbiah]

Not sure why the page loading is not smooth.

[ryansolid]

Need to be more specific. For the most part this is just using stock CSS and markup provided. Unclear the not smooth part.

[noga-dev]

Need to be more specific. For the most part this is just using stock CSS and markup provided. Unclear the not smooth part.

I can also see it. If you click on "sign up" and then on the logo (home), back and forth, there's a noticeable delay between each route.

The same delay doesn't exist on Svelte's version (https://github.com/sveltejs/realworld), @ryansolid.

[ryansolid]

Ahh right I meant to come back to this.. Yeah a Suspense Transition without pending state indicator. We don't recede back to fallback but only show the new content when it's loaded, but there should be a visual for it, otherwise there is no feedback. I should do something about that. The original demo didn't have an affordance for that and I hadn't gotten around to it.

More background and theory about why it is a better UI experience (assuming there is feedback): https://17.reactjs.org/docs/concurrent-mode-patterns.html#the-three-steps

[rrjanbiah]

FWIW, I now went through all Real Word demos in https://codebase.show/projects/realworld and observed few things:

1. None of the demos have implemented skeletons
2. None of the demos have implemented caching and so when going back to any listing page, they again fetch the contents
3. Most of the demos have "No contents here" instead of "Loading contents..."

So, it looks like all the authors have high speed machines and high speed internet connections to notice the weirdness.

I have handpicked few implementations as some of them load view page from the data available in the listing page. So, slightly snappier than others:

1. https://github.com/mint-lang/mint-realworld
2. https://github.com/gothinkster/clojurescript-keechma-realworld-example-app
3. https://github.com/reck1ess/next-realworld-example-app
4. https://github.com/romansndlr/react-vite-realworld-example-app
5. https://github.com/rjaros/kvision-realworld-example-app
6. https://github.com/jacekschae/conduit
7. https://github.com/ecomfe/san-realworld-app
8. https://github.com/gothinkster/crizmas-mvc-realworld-example-app - at least loading indicator
9. https://github.com/pocojang/nuxt-realworld - This is outlier: First loading is fast & snappy, but when we load/go from any page, it is slow again

Since, SolidJS is better than React, I expected snappy & smooth UI. I'm not sure if Suspense will be of any help. If anything to be done better, I think, may refer Linear app (for the correct snappiness). But, AFAIK, it is Angular.

[noga-dev]

Ahh right I meant to come back to this.. Yeah a Suspense Transition without pending state indicator. We don't recede back to fallback but only show the new content when it's loaded, but there should be a visual for it, otherwise there is no feedback. I should do something about that. The original demo didn't have an affordance for that and I hadn't gotten around to it.

More background and theory about why it is a better UI experience (assuming there is feedback): https://17.reactjs.org/docs/concurrent-mode-patterns.html#the-three-steps

In the case of the Svelte demo it loads the pages instantly and then async loads components on the page
(incl. showing loading indicators before revealing the content) instead of loading the components, and then routing to the page, seemingly synchronously. The Svelte demo takes the right approach in terms of ux.

[noga-dev]

FWIW, I now went through all Real Word demos in https://codebase.show/projects/realworld and observed few things:

1. None of the demos have implemented skeletons
2. None of the demos have implemented caching and so when going back to any listing page, they again fetch the contents
3. Most of the demos have "No contents here" instead of "Loading contents..."

So, it looks like all the authors have high speed machines and high speed internet connections to notice the weirdness.

I have handpicked few implementations as some of them load view page from the data available in the listing page. So, slightly snappier than others:

1. https://github.com/mint-lang/mint-realworld
2. https://github.com/gothinkster/clojurescript-keechma-realworld-example-app
3. https://github.com/reck1ess/next-realworld-example-app
4. https://github.com/romansndlr/react-vite-realworld-example-app
5. https://github.com/rjaros/kvision-realworld-example-app
6. https://github.com/jacekschae/conduit
7. https://github.com/ecomfe/san-realworld-app
8. https://github.com/gothinkster/crizmas-mvc-realworld-example-app - at least loading indicator
9. https://github.com/pocojang/nuxt-realworld - This is outlier: First loading is fast & snappy, but when we load/go from any page, it is slow again

Since, SolidJS is better than React, I expected snappy & smooth UI. I'm not sure if Suspense will be of any help. If anything to be done better, I think, may refer Linear app (for the correct snappiness). But, AFAIK, it is Angular.

To use another example: https://hydrogen-solid.vercel.app/ (https://github.com/harshmangalam/hydrogen-solidjs-client) feels pretty snappy, albeit lacking in smooth transitions. Didn't really delve into the code but prob some useful info there, especially given it's more complex in scale.

[rrjanbiah]

@noga-dev

To use another example: https://hydrogen-solid.vercel.app/ (https://github.com/harshmangalam/hydrogen-solidjs-client) feels pretty snappy, albeit lacking in smooth transitions. Didn't really delve into the code but prob some useful info there, especially given it's more complex in scale.

Not really a good UX to me (Login details: john@mailinator.com // johnjohn). Uses skeleton, but when there is no data, it goes no records kinda message. If you meant snappiness for the login/register page, almost all Real Word demo have snappiness on these 2 pages already.

[noga-dev]

@noga-dev

To use another example: https://hydrogen-solid.vercel.app/ (https://github.com/harshmangalam/hydrogen-solidjs-client) feels pretty snappy, albeit lacking in smooth transitions. Didn't really delve into the code but prob some useful info there, especially given it's more complex in scale.

Not really a good UX to me (Login details: john@mailinator.com // johnjohn). Uses skeleton, but when there is no data, it goes no records kinda message. If you meant snappiness for the login/register page, almost all Real Word demo have snappiness on these 2 pages already.

Past the login when you can interact with the app after registering. There's an entire social media app there.

[rrjanbiah]

@noga-dev

Past the login when you can interact with the app after registering. There's an entire social media app there.

I'm also referring to the same. It uses skeleton (better than others), but data is not snappy to me & when there is no data, it gets weird UX.

[ryansolid]

Ahh right I meant to come back to this.. Yeah a Suspense Transition without pending state indicator. We don't recede back to fallback but only show the new content when it's loaded, but there should be a visual for it, otherwise there is no feedback. I should do something about that. The original demo didn't have an affordance for that and I hadn't gotten around to it.
More background and theory about why it is a better UI experience (assuming there is feedback): https://17.reactjs.org/docs/concurrent-mode-patterns.html#the-three-steps

In the case of the Svelte demo it loads the pages instantly and then async loads components on the page (incl. showing loading indicators before revealing the content) instead of loading the components, and then routing to the page, seemingly synchronously. The Svelte demo takes the right approach in terms of ux.

Yeah, unclear if that is true. Its a one-liner to get that behavior and maybe easiest to do for now. But I think with visual queue avoiding receding is almost always better for any critical content. Like if we didn't wait for the tags that'd be fine. But no point showing listing page without the listings. Performance of the API might be a consideration here. React had timeouts at one point but decided against it.

As for lack of caching on on listings and other features a lot of this spawns from copy other implementations and being given all the markup. Not much veers off. I thought we had forward caching articles but maybe that broke at one point. This demo is a bit dated. I was intending to rehaul it at some point after done with stuff like SolidStart but the project seems to have sort of died off.

[noga-dev]

@noga-dev

Past the login when you can interact with the app after registering. There's an entire social media app there.

I'm also referring to the same. It uses skeleton (better than others), but data is not snappy to me & when there is no data, it gets weird UX.

It's just an interesting POC I found while researching frameworks, and I've seen worse from FAANG in production (even recently).

Ahh right I meant to come back to this.. Yeah a Suspense Transition without pending state indicator. We don't recede back to fallback but only show the new content when it's loaded, but there should be a visual for it, otherwise there is no feedback. I should do something about that. The original demo didn't have an affordance for that and I hadn't gotten around to it.
More background and theory about why it is a better UI experience (assuming there is feedback): https://17.reactjs.org/docs/concurrent-mode-patterns.html#the-three-steps

In the case of the Svelte demo it loads the pages instantly and then async loads components on the page (incl. showing loading indicators before revealing the content) instead of loading the components, and then routing to the page, seemingly synchronously. The Svelte demo takes the right approach in terms of ux.

Yeah, unclear if that us true. Its a one-liner to get that behavior and maybe easiest to do for now. But I think with visual queue avoiding receding is almost always better for any critical content. Like if we didn't wait for the tags that'd be fine. But no point showing listing page without the listings. Performance of the API might be a consideration here. React had timeouts at one point but decided against it.

Aa for lack of caching on on listings and other features a lot of this spawns from copy other implementations and being given all the markup. Not much veers off. I thought we had forward caching articles but maybe that brokeat one point. This demo is a bit dated. I was intending to rehaul it at some point after done with stuff like SolidStart but the project seems to have sort of died off.

I should note that I've only discovered Solid a few days ago, and I'm primarily a Flutter dev, so I apologize for my ignorance regarding any specifics of the frameworks, proper usage, and accepted practices. I'm tackling this issue from the standpoint of someone looking to get back into proper webdev (after previously mostly doing vanilla/jq/wp stuff for years), and so far Solid and Svelte have my attention. Thank you for your patience and eloquent replies 🙇.