Fix object print to screen.

This commit is contained in:
Bradley Shellnut 2022-02-11 14:19:52 -08:00
parent ddc65fbbfb
commit 090fb4056f
3 changed files with 15 additions and 18 deletions

View file

@ -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>
@ -25,7 +25,7 @@
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
inset: calc(50% - calc(var(--size) / 2)); inset: calc(50% - calc(var(--size)/2));
background: purple; background: purple;
border-radius: var(--size); border-radius: var(--size);
height: var(--size); height: var(--size);
@ -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>

View file

@ -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();

View file

@ -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>