"Simulating" loading state with createAsync

import { createAsync, query } from '@solidjs/router';
import { Suspense } from 'solid-js';

function DataDisplayer(props: { data: string | undefined }) {
  return <div>{props.data ?? 'Data still loading'}</div>;
}

const getData = query(async (): Promise<{ data: string }> => {
  return await new Promise((resolve) => {
    setTimeout(() => {
      resolve({ data: 'hello' });
    }, 1000);
  });
}, 'getData');

export default function Home() {
  const data = createAsync(() => getData());

  return (
    <main>
      <Suspense fallback="Loading">{Boolean(data())}</Suspense>
      <DataDisplayer data={data()?.data} />
    </main>
  );
}