https://github.com/scosman/sveltekit-navigation-loader
Utility for showing a navigation/loading indicator in SvelteKit
https://github.com/scosman/sveltekit-navigation-loader
preload svelte sveltekit
Last synced: over 1 year ago
JSON representation
Utility for showing a navigation/loading indicator in SvelteKit
- Host: GitHub
- URL: https://github.com/scosman/sveltekit-navigation-loader
- Owner: scosman
- License: mit
- Created: 2023-09-13T13:34:06.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-13T19:01:18.000Z (almost 3 years ago)
- Last Synced: 2025-01-16T14:56:10.470Z (over 1 year ago)
- Topics: preload, svelte, sveltekit
- Language: Svelte
- Homepage:
- Size: 15.6 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Sveltekit Navigation Progress Indicator
Utility for showing a navigation progress indicator in SvelteKit.
### Before and After Demo
Before and after shown with an artificial 3s page load delay.
### Why is this needed in SvelteKit projects?
SvelteKit includes an awesome feature called [preloading](https://kit.svelte.dev/docs/link-options). It fetches the code and data for the next page before you even click the link, often leading to instantaneous rendering for the user. It does so by prefetching content via Javascript, then replacing the DOM content instead of doing a full page load.
There is one big downside: if there is a delay, the user has no visual indication the content is loading. Had we initiated a full page load, the browser itself would shows a loading indicator. However, since SvelteKit is just requesting the content via Javascript, the browser doesn't know to show an indicator and the user is left hanging.
For short delays there's an uncanny valley where the page seems unresponsive (even though it likely renders the next page faster than a traditional page load would have). Long delays leave the user wondering if the system registered their click at all.
### Solution
The included `+layout.svelte` can be included in your `src/routes/` directory to add a visual indicator while the page is navigating. It's similar to the loading indicator used on Github and YouTube.
It animates a single small progress div while a navigation is happening. It is rendered in a fixed position at the top of your page so it likely won't clash with existing styles/design (but obviously please check that). As soon at the navigation finishes it disappears.
### Design Notes
- 100ms delay is helpful so it doesn't render or flash for instant page loads. The bar only shows up when there is a real user perceptible delay.
- The exponential easing is quite helpful. Quick loads still see meaningful bar progress even in a few hundred milliseconds, while very long page loads still see the progress bar progressing until the end.