diff --git a/package.json b/package.json index 5896d37..0ce1140 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@sveltejs/adapter-node": "^1.2.4", "@sveltejs/adapter-static": "^2.0.3", "@sveltejs/kit": "^1.20.5", + "nprogress": "^0.2.0", "sass": "^1.62.0", "svelte": "^3.54.0", "svelte-material-icons": "^3.0.5", diff --git a/src/app.scss b/src/app.scss index 60fd4e6..a205755 100644 --- a/src/app.scss +++ b/src/app.scss @@ -68,3 +68,12 @@ button.transparent, [data-theme="dark"] .overflowing::after { background: linear-gradient(to top, $slate-800, #00000000); } + +#nprogress .bar { + background: #398711 !important; +} + +/* Fancy blur effect */ +#nprogress .peg { + box-shadow: 0 0 10px #398711, 0 0 6px #398711 !important; +} diff --git a/src/lib/modules/ModCards.svelte b/src/lib/modules/ModCards.svelte index 0cb8f0c..486dc46 100644 --- a/src/lib/modules/ModCards.svelte +++ b/src/lib/modules/ModCards.svelte @@ -8,6 +8,7 @@ let searchQuery = ""; let selectedFile = "modlist-rekindled.json"; let fileList = []; + let loading = true; let searchQueryInput = (event) => { clearTimeout(timeout); @@ -37,11 +38,13 @@ } onMount(async () => { + loading = true; const response = await fetch("/assets/json/modlist-items.json"); const data = await response.json(); fileList = data; await fetchData(selectedFile); checkOverflow(); + loading = false; }); function fuzzySearch(query, mods) { @@ -63,8 +66,10 @@ } afterUpdate(() => { + loading = true; removeOverflow(); checkOverflow(); + loading = false; }) @@ -83,7 +88,9 @@
Loading...
+{:else if fuzzySearch(searchQuery, mods.mods).length === 0 && fuzzySearch(searchQuery, mods.optional_mods).length === 0}⚠️ No results found.
{:else}