mirror of
https://github.com/BradNut/svelteKitPageLoader
synced 2025-09-08 17:40:35 +00:00
Fix object print to screen.
This commit is contained in:
parent
ddc65fbbfb
commit
090fb4056f
3 changed files with 15 additions and 18 deletions
|
|
@ -1,12 +1,12 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { loading } from '$lib/loading';
|
import { loading } from '$lib/loading'
|
||||||
|
|
||||||
$: if ($loading.status === 'NAVIGATING') {
|
$: if ($loading.status === 'NAVIGATING') {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if ($loading.status === 'NAVIGATING') {
|
if ($loading.status === 'NAVIGATING') {
|
||||||
$loading.status = 'LOADING';
|
$loading.status = 'LOADING'
|
||||||
}
|
}
|
||||||
}, 400);
|
}, 400)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -35,11 +35,10 @@
|
||||||
|
|
||||||
@keyframes moveLoader {
|
@keyframes moveLoader {
|
||||||
from {
|
from {
|
||||||
transform: translate3d(100px, 0, 0);
|
transform: translate3d(100px, 0, 0)
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
transform: translate3d(-100px, 0, 0);
|
transform: translate3d(-100px, 0, 0)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,17 +1,17 @@
|
||||||
import { writable } from "svelte/store";
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
const newLoading = () => {
|
const newLoading = () => {
|
||||||
const { subscribe, update, set } = writable({
|
const { subscribe, update, set } = writable({
|
||||||
status: "IDLE", // IDLE, LOADING, NAVIGATING
|
status: 'IDLE', // IDLE, LOADING, NAVIGATING
|
||||||
message: ""
|
message: '',
|
||||||
});
|
});
|
||||||
|
|
||||||
function setNavigate(isNavigating: boolean) {
|
function setNavigate(isNavigating: boolean) {
|
||||||
update(() => {
|
update(() => {
|
||||||
return {
|
return {
|
||||||
status: isNavigating ? 'NAVIGATING' : 'IDLE',
|
status: isNavigating ? 'NAVIGATING' : 'IDLE',
|
||||||
message: ''
|
message: '',
|
||||||
}
|
};
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -19,12 +19,12 @@ const newLoading = () => {
|
||||||
update(() => {
|
update(() => {
|
||||||
return {
|
return {
|
||||||
status: isLoading ? 'LOADING' : 'IDLE',
|
status: isLoading ? 'LOADING' : 'IDLE',
|
||||||
message: isLoading ? message : ''
|
message: isLoading ? message : '',
|
||||||
}
|
};
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return { subscribe, update, set, setNavigate, setLoading };
|
return { subscribe, update, set, setNavigate, setLoading };
|
||||||
}
|
};
|
||||||
|
|
||||||
export const loading = newLoading();
|
export const loading = newLoading();
|
||||||
|
|
|
||||||
|
|
@ -8,8 +8,6 @@
|
||||||
$: loading.setNavigate(!!$navigating);
|
$: loading.setNavigate(!!$navigating);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{$loading}
|
|
||||||
|
|
||||||
<slot />
|
<slot />
|
||||||
|
|
||||||
<button on:click={() => loading.setLoading(true, "I'm loading")}>Set Loading</button>
|
<button on:click={() => loading.setLoading(true, "I'm loading")}>Set Loading</button>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue