How to implement an ErrorHandle to wrap the handle error and loading of a resource?

import { Component, Show, children} from "solid-js";
import Alert from "./Alert";

const ErrorHandle: Component = (props) => {
  const c = children(() => props.children);
  return (
    <Show
      when={!props.data.error}
      fallback={
        (props.data.error && <Alert severity="warning">                   {props.data.error?.message}</Alert>) ||
         "loading..."
      }
    >
      {c}
    </Show>
  );
};

export default ErrorHandle;