Show Loading
I'm trying to figure out how to show my loading spinner when the todo is streaming from the server:
Currently, it never loads.
J
import { createAsync, query, RouteDefinition } from "@solidjs/router";
import { ErrorBoundary, Show } from "solid-js";
import { Loading } from "./loading";
type Todo = {
title: string
};
const getTodo = query(async () => {
'use server';
const randomTodo = Math.floor(Math.random() * 200) + 1;
const todo = await fetch(`https://jsonplaceholder.typicode.com/todos/${randomTodo}`);
return await todo.json() as Todo;
}, 'todo');
export const route = {
preload: () => getTodo()
} satisfies RouteDefinition;
export default function Home() {
const todo = createAsync(() => getTodo(), { deferStream: true });
return (
<main class="flex flex-col justify-center items-center mt-5 gap-3">
<h1 class="text-2xl">Todo</h1>
<ErrorBoundary fallback={<div>Something went wrong!</div>}>
<Show when={todo()} fallback={<Loading />}>
{(data) => (
<h2>{data().title}</h2>
)}
</Show>
</ErrorBoundary>
</main>
);
}import { createAsync, query, RouteDefinition } from "@solidjs/router";
import { ErrorBoundary, Show } from "solid-js";
import { Loading } from "./loading";
type Todo = {
title: string
};
const getTodo = query(async () => {
'use server';
const randomTodo = Math.floor(Math.random() * 200) + 1;
const todo = await fetch(`https://jsonplaceholder.typicode.com/todos/${randomTodo}`);
return await todo.json() as Todo;
}, 'todo');
export const route = {
preload: () => getTodo()
} satisfies RouteDefinition;
export default function Home() {
const todo = createAsync(() => getTodo(), { deferStream: true });
return (
<main class="flex flex-col justify-center items-center mt-5 gap-3">
<h1 class="text-2xl">Todo</h1>
<ErrorBoundary fallback={<div>Something went wrong!</div>}>
<Show when={todo()} fallback={<Loading />}>
{(data) => (
<h2>{data().title}</h2>
)}
</Show>
</ErrorBoundary>
</main>
);
}Currently, it never loads.
J
