<For> throws hydradtion error with a <span> as fallback element

    <>
      <div id="products-container">
        <For each={props.products()} fallback={<span>loading</span>}>
          {(product, i) => {
            debugger;
            return (
              <ProductItem product={product} key={`${i()}-${product.id}`} />
            );
          }}
          {/* {(product, i) => (
            <div style={{ background: "red" }}>product {i()}</div>
          )} */}
        </For>
      </div>
    </>

    <>
      <div id="products-container">
        <For each={props.products()} fallback={<span>loading</span>}>
          {(product, i) => {
            debugger;
            return (
              <ProductItem product={product} key={`${i()}-${product.id}`} />
            );
          }}
          {/* {(product, i) => (
            <div style={{ background: "red" }}>product {i()}</div>
          )} */}
        </For>
      </div>
    </>

    <>
      <div id="products-container">
        <For each={props.products()} fallback="loading">
          {(product, i) => {
            debugger;
            return (
              <ProductItem product={product} key={`${i()}-${product.id}`} />
            );
          }}
          {/* {(product, i) => (
            <div style={{ background: "red" }}>product {i()}</div>
          )} */}
        </For>
      </div>
    </>

    <>
      <div id="products-container">
        <For each={props.products()} fallback="loading">
          {(product, i) => {
            debugger;
            return (
              <ProductItem product={product} key={`${i()}-${product.id}`} />
            );
          }}
          {/* {(product, i) => (
            <div style={{ background: "red" }}>product {i()}</div>
          )} */}
        </For>
      </div>
    </>