how to wrap one of the control components

preface: this is probably a silly idea to begin with, but i started trying to implement this and now just want to see it through

basically, between actual conditions, and just guarding against async values, i've ended up with a lot of

<Show/>

<Show/>

on my page. i had an idea to basically wrap <Show /> to create a new component <Suspending />, and instead of taking

fallback

fallback

it takes

skeleton

skeleton

as i'm using loading skeletons for fallback on async values. (like i said, i know this is kind of silly as im basically trying to just rename the component). would marginally help me figure out what i'm using as async guard, and what i'm using for other state like mapping a list vs showing empty array state.

i tried to implement it as follows by just taking the prop type defs from the Show component (and then i would handle renaming to my liking once i have it working), but the types are not making it through and often becoming any or {}

type SuspendingProps<T> = {
  when: Parameters<typeof Show>[0]["when"];
  fallback: Parameters<typeof Show>[0]["fallback"];
  children: Parameters<typeof Show>[0]["children"];
};

function Suspending<T>(props: SuspendingProps<T>) {
  return <Show {...props} />;
}

type SuspendingProps<T> = {
  when: Parameters<typeof Show>[0]["when"];
  fallback: Parameters<typeof Show>[0]["fallback"];
  children: Parameters<typeof Show>[0]["children"];
};

function Suspending<T>(props: SuspendingProps<T>) {
  return <Show {...props} />;
}

when i use it like this, the type of user doesn't really make it through and i get type errors

      <Suspending
        when={user}
        fallback={<HeaderSkeleton username={params.username} />}
      >
        {(user) => <Header user={user()} view={view()} />}
      </Suspending>

      <Suspending
        when={user}
        fallback={<HeaderSkeleton username={params.username} />}
      >
        {(user) => <Header user={user()} view={view()} />}
      </Suspending>

anyone got ideas? I was thinking maybe generics could help which is why I set up the T type param on the fn, but i couldn't figure out how to wire that up properly

how to wrap one of the control components

<Show/>

<Show/>

on my page. i had an idea to basically wrap <Show /> to create a new component <Suspending />, and instead of taking

fallback

fallback

it takes

skeleton

skeleton

type SuspendingProps<T> = {
  when: Parameters<typeof Show>[0]["when"];
  fallback: Parameters<typeof Show>[0]["fallback"];
  children: Parameters<typeof Show>[0]["children"];
};

function Suspending<T>(props: SuspendingProps<T>) {
  return <Show {...props} />;
}

type SuspendingProps<T> = {
  when: Parameters<typeof Show>[0]["when"];
  fallback: Parameters<typeof Show>[0]["fallback"];
  children: Parameters<typeof Show>[0]["children"];
};

function Suspending<T>(props: SuspendingProps<T>) {
  return <Show {...props} />;
}

when i use it like this, the type of user doesn't really make it through and i get type errors

      <Suspending
        when={user}
        fallback={<HeaderSkeleton username={params.username} />}
      >
        {(user) => <Header user={user()} view={view()} />}
      </Suspending>

      <Suspending
        when={user}
        fallback={<HeaderSkeleton username={params.username} />}
      >
        {(user) => <Header user={user()} view={view()} />}
      </Suspending>

anyone got ideas? I was thinking maybe generics could help which is why I set up the T type param on the fn, but i couldn't figure out how to wire that up properly

how to wrap one of the control components

Similar Threads

how to wrap one of the control components

Similar Threads

Similar Threads

Similar Threads