Shellnut_Public/personal-website-sveltekit
1
0
Fork 0
mirror of https://github.com/BradNut/personal-website-sveltekit synced 2025-09-08 23:20:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixing loading image when scripts are not loaded.

Browse source
This commit is contained in:
Bradley Shellnut 2023-11-12 15:53:02 -08:00
parent 9f15a93f9c
commit cc279db1df
2 changed files with 7 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
package.json
View file

@ -3,10 +3,11 @@
"version": "0.0.1", "version": "0.0.1",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite dev", "dev": "NODE_OPTIONS=\"--inspect\" vite dev --host",
"build": "vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",
"test": "npm run test:integration && npm run test:unit", "test": "npm run test:integration && npm run test:unit",
"test:ui": "svelte-kit sync && playwright test --ui",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --plugin-search-dir . --check . && eslint .", "lint": "prettier --plugin-search-dir . --check . && eslint .",
@ -59,6 +60,10 @@
"vitest": "^0.32.2" "vitest": "^0.32.2"
}, },
"type": "module", "type": "module",
"engines": {
"node": ">=18.0.0 <19.0.0 || >=20.0.0 <21.0.0",
"pnpm": ">=8"
},
"dependencies": { "dependencies": {
"@melt-ui/svelte": "^0.50.1", "@melt-ui/svelte": "^0.50.1",
"@types/nprogress": "^0.2.3", "@types/nprogress": "^0.2.3",

2
src/lib/components/LazyImage.svelte
View file

@ -21,7 +21,7 @@
<div class="wrap"> <div class="wrap">
<Img class={clazz} {style} {src} {alt} {loading} bind:ref on:load={() => (loaded = true)} /> <Img class={clazz} {style} {src} {alt} {loading} bind:ref on:load={() => (loaded = true)} />
<div class="blur" class:loaded /> <div class:blur={loaded} class:loaded />
</div> </div>
<style lang="postcss"> <style lang="postcss">