Show Loading

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>
  );
}