Using createResource blocks the rendering of component when loading

[vighnesh153]

Describe the bug

Hi Solid.js team.

I am not sure if this is a bug in Solid.js or Astro.js, but I will start by filing it here. Please let me know if I should move this to Astro.js queue.

Bug prerequisites

• Integrate Solid.js in Astro

Issue description

I am using createResource to fetch and display data. To simulate latency, I added a sleep of 3 seconds. I observed that my loading state wasn't showing up when fetching data. I added some more html elements in the component that don't depend on the state returned by createResource but even those are not displayed when data fetching is in progress.

Wrapping the component in Suspense fixes the issue and I am able to see the loading state that I set in the fallback prop of Suspense.

Why do I think this is an issue?

On the fetching-data documentation, the very first example doesn't make use of Suspense component and when I copy paste the code in a pure Solid.js project, it works as expected (loading status is displayed). But, when I copy paste the same code in Astro.js, the loading status isn't displayed.

IMO, if this works in a pure Solid.js app, it should also work in Astro.js. If this is intended behaviour, it would be helpful to have a note in the documentation saying that the example only works in pure Solid.js app.

Following is the code sample from Stackblitz for reference:

import { createSignal, createResource, Switch, Match, Show } from 'solid-js';

const fetchUser = async (id) => {
  await new Promise((resolve) => {
    setTimeout(() => resolve(), 3000);
  });
  return { id, user: `User - ${id}` };
};

export function SolidComponent() {
  const [userId, setUserId] = createSignal();
  const [user] = createResource(userId, fetchUser);

  return (
    <div>
      <h2>Hello</h2>
      <input
        type="number"
        min="1"
        placeholder="Enter Numeric Id"
        onInput={(e) => setUserId(e.currentTarget.value)}
      />
      <Show when={user.loading}>
        <p>Loading...</p>
      </Show>
      <Switch>
        <Match when={user.error}>
          <span>Error: {user.error}</span>
        </Match>
        <Match when={user()}>
          <div>{JSON.stringify(user())}</div>
        </Match>
      </Switch>
    </div>
  );
}

PS: I love Solid.js and use it in all my personal projects. Thanks for creating such an amazing framework that fixes the issues in React & Svelte.

Your Example Website or App

https://stackblitz.com/edit/withastro-astro-dvzrydzc?file=src%2Fcomponents%2FSolidComponent.jsx

Steps to Reproduce the Bug or Issue

1. Open the reproduction link
2. Type a number in the input box (eg. 1, 2, etc...)
3. Observe the UI. The loading status will disappear from the DOM when data fetching is in progress.

Expected behavior

Either this should work in both a pure Solid.js app and Hybrid app with Astro.js, or it should work in none.

If this is intended behaviour, it would be helpful to have a warning on the docs. :D

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome
• Version: latest

Additional context

No response

[ryansolid]

Generally we need Suspense for SSR. If this isn't documented it should be. Solid doesn't know that the rendering on the server is done otherwise. This is true of SolidStart as well but all our templates come with Suspense built in.

All the tutorials and originally the docs were focused on client only Solid. I believe things have been updated in the docs since. A lot of the time people are fetching data in Astro itself and passing it in so this doesn't come up as often but generally if you are SSRing a Solid component with resources use Suspense.

[vighnesh153]

Thank you for the clarification.