QwikDev / qwik

Instant-loading web apps, without effort
https://qwik.dev
MIT License
20.71k stars 1.29k forks source link

[🐞]useResource$ blocks rendering elements after <Resource> on first load when it first runs on server #6914

Open laurencefass opened 5 days ago

laurencefass commented 5 days ago

Which component is affected?

Qwik Runtime

Describe the bug

I am trying out useResource with Resource for the first time with a very simple example to understand mechanics. It works as anciticpated once loaded and reactivated on the client but partially blocks page rendering on initial load.

I say partially: consider the following code. Im using the counter to retrigger useResource to force "Loading" for a short period.

import {
  useSignal,
  useResource$,
  Resource,
  component$,
  useVisibleTask$,
} from "@builder.io/qwik";

export const App = component$(() => {
  const count = useSignal(1);
  const mounted = useSignal(false);
  const resource = useResource$<number>(async ({ track }) => {
    track(() => count.value);
    console.log("useResource entry");
    await new Promise((resolve) => setTimeout(resolve, 5000));
    console.log("useResource exit, returning ", count.value);
    return count.value;
  });

  useVisibleTask$(async () => {
    console.log("useTask");
    mounted.value = true;
  });

  return (
    <>
      {mounted.value === false && <div>Waiting for useResource$.......</div>}
      <div>
        Resource:{" "}
        <Resource
          value={resource}
          onPending={() => <>Loading...</>}
          onResolved={(resource) => <>{resource}</>}
        />
      </div>
      <div>Trace2</div>
      <button onClick$={() => count.value--}>Decrement</button>
      <button onClick$={() => count.value++}>Increment</button>
    </>
  );
});

export default App;

Result: on page reload all rendering is blocked after Resource: until the delay expires. I think it should display "Loading" and continue rendering the remainder of the elements on the page. If it did this it would work like <Suspense> in React. However blocking some of the rendering looks like a bug.

Reproduction

https://codesandbox.io/p/devbox/ecstatic-forest-ymxxv8?file=%2Fsrc%2Froutes%2Findex.tsx%3A18%2C1

Steps to reproduce

Load the sandbox and inspect the index.tsx file. you can see in the log that the useResource is waiting on the server. I dont think this should block everything after the on the client.

System Info

codesandbox

Additional Information

No response