How to detect createMemo loading in 2.0?

[simwr872]

Hello! Trying out the new 2.0 release. Is there any way to know that a memo is loading, regardless whether it is the first load or not? 2.0 introduced isPending but it will be false on first load. The Loading component is what I need but to have the result stored in a signal. Basically an isLoadingOrPending function.

Previously this was possible by using createResource and looking at its state.

[aniruddhaadak80]

@simwr872 If you need 'first load OR pending' semantics, isPending alone won't cover first-load (as you noticed). A practical pattern is combining it with an initialization flag.

Conceptually:

• initialized = false until first resolved value
• isLoadingOrPending = !initialized || isPending

If your use-case is primarily async state + loading lifecycle, createResource-style state tracking is still often simpler than forcing that behavior through createMemo.

Sources:

• https://www.solidjs.com/docs/latest/api#createresource
• https://www.solidjs.com/docs/latest/api#creatememo

[ryansolid]

@simwr872 Can you give me a quick example of how you expect to use this. I want to visualize it. I have an idea, one is have isPending being configurable to show initial isPending. But the most helpful thing is to see usage so O can determine the best payterns.

[simwr872]

Sure, please see https://solid2.netlify.app/#solidjs-repl:ckGoFMU4RvOEe65sd-TLDg or snippet below.

Perhaps I'm using the wrong tool for what I want to achieve. But this component will be loaded with some initial value, meant to be used as an argument when calling an external service. This value can be updated within the component and, upon pressing a button, will call the external service again with the updated value.

However, I would like to show the UI that depends on this external call before it completes. In the example I have some textboxes that set placeholder values based on the result of the external call. If you could detect the first load, I could potentially create another signal that is at first undefined and later resolves to the external call result. Placeholders could be externalResult()?.xxx.

(I would also like to disable/mark "loading" on the button on first load, until the call completes. But that is of less importance right now.)

Snippet

import { render } from '@solidjs/web';
import { createMemo, refresh, isPending, createSignal, untrack, Loading, Show } from 'solid-js';

async function externalCall(arg: string) {
  await new Promise(resolve => setTimeout(resolve, 1000));
  return { arg, value: Math.random() };
}

interface Props {
  initialExternalArg: string
}

export default function App(props: Props) {
  const [externalArg, setExternalArg] = createSignal(props.initialExternalArg);
  const externalResult = createMemo(() => externalCall(untrack(externalArg)));
  const isExternalResultPending = () => isPending(externalResult)

  return <>
    <input
      type="text"
      class="border rounded px-3 py-2 focus:ring-2 focus:ring-blue-500"
      value={externalArg()}
      on:change={e => setExternalArg(e.target.value)} />
    <button
      type="button"
      class="bg-blue-500 text-white px-4 py-2 rounded"
      on:click={() => refresh(externalResult)}
      disabled={isExternalResultPending()}>
      <Show
        when={isExternalResultPending()}
        fallback={"Update"}>
        Loading...
      </Show>
    </button>
    {/*other ui elements depending on externalResult...*/}
    <Loading
      fallback={<div>Loading...</div>}>
      <div>
        <input
          type="text"
          class="border rounded px-3 py-2 focus:ring-2 focus:ring-blue-500"
          placeholder={externalResult().arg} />
        <input
          type="text"
          class="border rounded px-3 py-2 focus:ring-2 focus:ring-blue-500"
          placeholder={externalResult().value.toString()} />
      </div>
    </Loading>
  </>;
}

// Guard: only mount in a browser context.
// When SSR is enabled, entry-server.tsx imports this module inside a Worker
// where "document" does not exist — the render call must be skipped there.
if (typeof document !== 'undefined') {
  render(() => <App initialExternalArg="hello" />, document.getElementById('root')!);
}

[tamish-max]

At the moment I would treat this as “there is no built-in isLoadingOrPending flag”, so the practical fix is to combine isPending with your own “has resolved once” signal.

const [resolvedOnce, setResolvedOnce] = createSignal(false);

const value = createMemo(() => {
  const v = expensiveOrAsyncSource();
  if (!resolvedOnce()) queueMicrotask(() => setResolvedOnce(true));
  return v;
});

const isLoadingOrPending = () => !resolvedOnce() || value.isPending;

That gives you the semantics you described:

• first run => loading
• later invalidations => pending

If the thing you are modeling is fundamentally async data with loading/error states, I’d still seriously consider createResource/createAsync instead of forcing memo to behave like a resource. But if you want to stay with a memo, a tiny wrapper signal like the above is the cleanest pattern I’ve found.