[🐞]Infinite Loading When Using <Resource> in Conditional Rendering Description

[nhayhoc]

Which component is affected?

Qwik Runtime

Describe the bug

When using inside a conditional block in Qwik, the web application and Qwik Playground enter an infinite loading state. Removing the condition around resolves the issue.

Reproduction

https://qwik.dev/playground/#f=7VdNS%2FQwEL6%2FvyJvEEmldhUP4scqCB68iR7Fg2LEatyKZRUp%2Fe8%2BM5OkSbcLXgV7WNrsZOaZj8w8SYtmf%2FcgZgoCGyV%2BhjKgr1Ce9J5Wq%2F%2BWGe0%2F0jZY%2FvNZ0uOsakTqR6XnucJT83nN%2FfEMDWQ%2BGDWPd6618ClI1kQBZDqlYlonMnH2rJFbdcSYTqZ%2ByQ1usXxTfYSo5C8PegBQoVUsCRvLiOlhrs%2BTsZr4S0%2BOT9RAfqyZHFKqL9Xezk60Iui8wrQZm2i64FDQyY0RoWF92bQYLxyMoR1JBw%2FeZ057h9CFJDPYKnHI4bOxWPg3g%2FxtgiI%2FFsQ4Y3Ez64zVHUlXlxZJeLIyiXH7P7EsoPyudXnw2fBdu8KQPHeWXs%2B%2BLh6M5nxsy9jWxWn1CMHWeH%2FlQXJ2OTlxoej9%2B3BiuymA6lRpsMKFVodKg%2B60VoedkYpLyqFgtoUIvjZgC0QRa%2Bpw6LFEOBaNAi9o3tXWLGzvpqxtbvrgZ32JP9jNLCLUveeaMqmz9XsMtEPWN%2B%2BGYg12QwKZpCOBxn6UyjqOuBnXNtJmnT9AqYLY2BhaqNPMggcQS3ps%2FxLdHm0eANg0V5sDKcBaVVVy3xnvubLPTHsJtQDOBPKaTVbpjnPS2erVti2oS38845XxZraZLWZOCwKmg4SAriMTdTo6RZmBpVsFh0ogTRVuLcZYV6p60jOvwdXqxX4hrz38cXDE1VMqixFwcW%2FVfHZKcCzW5FhGVhKQGCoaY8XRH%2FX4fdTjGw

Steps to reproduce

Use the following code in a Qwik component:

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

export default component$(() => {
  const showSearchBar = useSignal(false);
  const inputValue = useSignal("");
  const debouncedValue = useSignal("");

  useVisibleTask$(({ track, cleanup }) => {
    track(() => inputValue.value);

    const timeoutId = setTimeout(() => {
      debouncedValue.value = inputValue.value;
    }, 300);

    cleanup(() => clearTimeout(timeoutId));
  });

  const listPosts = useResource$(async ({ track }) => {
    const textSearch = track(debouncedValue);
    return [textSearch];
  });

  return (
    <div>
      <button
        onClick$={$(() => {
          showSearchBar.value = !showSearchBar.value;
          setTimeout(() => {
            document.getElementById("input-search")?.focus();
          }, 100);
        })}
      >
        {!showSearchBar.value ? "open" : "close"}
      </button>

      {/* Remove condition, then no error */}
      {showSearchBar.value && (
        <>
          <input
            type="text"
            bind:value={inputValue}
            onInput$={(ev, el) => (inputValue.value = el.value)}
          />
          <Resource
            value={listPosts}
            onPending={() => <div>loading...</div>}
            onRejected={(e) => (
              <div>
                <span>{e.message}</span>
              </div>
            )}
            onResolved={(data) => {
              return (
                <ul>
                  {data.map((el, i) => (
                    <li key={i}>{el}</li>
                  ))}
                </ul>
              );
            }}
          />
        </>
      )}
    </div>
  );
});

2. Open the app in a browser or Qwik Playground.

3. Click the "open" button to toggle the search bar and render the component conditionally.

Expected Behavior

The component should load and resolve normally when wrapped in a conditional block.

Actual Behavior

The application enters an infinite loading state. This behavior is observed in both the browser and Qwik Playground.

Removing the condition around prevents the issue.

Workaround

Currently, the only way to avoid the issue is to not wrap in a conditional rendering block.

Environment

Qwik Version: 1.11.0

Browser: Chrome newest

Qwik Playground: [Link to Playground if applicable]

Additional Context

It appears that the conditional rendering of conflicts with how its state is managed internally, causing an infinite loop of updates.

Please let me know if additional details or reproduction steps are required!

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700
    Memory: 17.43 GB / 31.75 GB
  Binaries:
    Node: 22.8.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.7.1 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (131.0.2903.86)
    Internet Explorer: 11.0.22621.3527

Additional Information

No response