solid-router

solid-router copied to clipboard

Describe the bug

Changing pages takes way too much time on iOS and even on desktop if the app is a bit demanding like when it has a background animation. It doesn't matter is it's SSR or standard SPA. I checked with svelte-kit and it is always instant there

Your Example Website or App

any solid app with this router and <A> links

Steps to Reproduce the Bug or Issue

1. Click on a route, e.g. /about
2. A delay <1 second appears
3. Page changed

Expected behavior

1. Click on a route, e.g. /about
2. Page changed instantly

Screenshots or Videos

No response

Platform

• OS: [iOS]
• Browser: [Safari]
• Version: [iOS 17.2.1]

Additional context

No response

Here is the video of solid looking laggy even for the most basic view https://github.com/solidjs/solid-router/assets/24430919/186fe747-700c-4696-81fd-78e482204545

A reproduction would really help here, even if it does happen with 'any solid app with this router and links', I for example haven't experienced it in my apps. Could it be something to do with transitions causing page navigation to be delayed while waiting for stuff to load?

I'm not sure about transitions but it's slow. For reproduction do "npm create solid@latest" and select basic template, add any routes and use <A>

Yeah hmm.. I'm not seeing it. Even with 6x CPU slowdown on desktop. It is possible there is some sort of performance thing. Maybe even platform specific. Do you see this same lag on: https://docs.solidjs.com/? This is a real site so there are other considerations there but I just want to sort of figure out where to narrow this down a bit because as Brendonovich says there are 1000s of sites out there using the router and this hasn't been reported before.

I experience it on iOS

https://github.com/solidjs/solid-router/assets/24430919/5a01b20b-5d47-4224-a10d-ce2fe403d259

https://github.com/solidjs/solid-router/assets/24430919/39dce155-073b-4131-b48e-bbe096ce01c5

Look how slow it is on Solid compared to Svelte

Isn't this more related to network being slow and the routes being loaded lazily? Maybe there is also a element in perception involved, since the nav on solid docs does close before the route is finished loading.

I noticed that the payload from the loaded route data in the svelte docs is like < 100B (depending on the page of course) while the route data loaded in solid docs is more in the ~ 80kB range.

@DoctorRyner did you have a look at the network tab (for size comparison) and while trying to throttle the network speed?

The page size doesn’t matter, it’s slow even in bare app with no js/css

I use SvelteKit rn and I don’t have this issue in my app. Look at the video I posted above, this is how it works on an iPhone even on bare app. For some reason the route changing is slow on iPhone

Yeah hmm.. I'm not seeing it. Even with 6x CPU slowdown on desktop. It is possible there is some sort of performance thing. Maybe even platform specific. Do you see this same lag on: https://docs.solidjs.com/? This is a real site so there are other considerations there but I just want to sort of figure out where to narrow this down a bit because as Brendonovich says there are 1000s of sites out there using the router and this hasn't been reported before.

Hello @oddcelot @ryansolid , Have you consider to change Network throttling to Slow 3g and try switching between routes. There is no indicator that the page is loading and it looks like the page is frozen.

It isn't fetching from network after loading them first time.

It is slow even on a macbook m1 / asahi, compared to svelte docs. But I think it's related to expressive-code block being inited. As if you find parts that dont have many, and hide from active viewport, then it's fast, otherwise it's several hundred milliseconds, you can see the title change first and blink before the rest of the articles comes in (not from network), so whilst most people wouldn't consider that slow it's still odd. I think probably a docs issue