createEffect is reactive, JSX isn't

export const SavedLineView = (props: { loading: Accessor<boolean> }) => {
  createEffect(() => {
    // This gets called with true, then false, the expected behavior
    console.log("What's the value here?", props.loading());
  });
  return (
    <Show
      // This doesn't update, it's always true (the initial value)
      when={props.loading()}
      fallback={
        <div class="row w-full justify-center pt-12">
          <Puff color={c.primaries[65]} />
        </div>
      }
    >
      <SidebarTemplate header={"Moves saved!"} bodyPadding actions={[]} />
    </Show>
  );
};

export const SavedLineView = (props: { loading: Accessor<boolean> }) => {
  createEffect(() => {
    // This gets called with true, then false, the expected behavior
    console.log("What's the value here?", props.loading());
  });
  return (
    <Show
      // This doesn't update, it's always true (the initial value)
      when={props.loading()}
      fallback={
        <div class="row w-full justify-center pt-12">
          <Puff color={c.primaries[65]} />
        </div>
      }
    >
      <SidebarTemplate header={"Moves saved!"} bodyPadding actions={[]} />
    </Show>
  );
};