SolidJSS
SolidJS•11mo ago•
5 replies
anthy

"Simulating" loading state with createAsync

Here's a very simplified example what I'm trying to achieve:
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>
  );
}


In my real application the <DataDisplayer /> is a table that I want always rendered and I don't want to enclose it in a <Suspense />. If I were using createResource I would just use .loading. I found this hacky way of using Suspense, but it is pretty dirty. Is there any better way I can do what I want to do?
Was this page helpful?