Is there any way to make child not to evaluate?

Question

Sorry if this is dumb but I got a spinner-wrapper which looks like this.

type Props = { condition: boolean; children: React.ReactNode };

export const SpinnerWrapper = ({ condition, children }: Props) => {
  return condition ? <Spinner /> : <>{children}</>;
};

But children evaluates nevertheless of the condition. So if it's loading child will give undefined error. Any way to prevent this? I want to abstract the conditional rendering.

EDIT: conditional rendering works fine without the wrapper, like this

{isLoading ? (
        <Spinner />
      ) : (<> {some.api.data} </> )

But this gives api-data is undefined

<SpinnerWrapper condition={isLoading}>{some.api.data}</SpinnerWrapper>

Answer 1

This is happening because your children are evaluated in the parent Component in this manner:

<SpinnerWrapper>
    <children1 />
    <children2 />
    ...
</SpinnerWrapper>

Instead, you want to conditionally show the spinner with no children when it's loading and with children when it's not.

isLoading ?
    <SpinnerWrapper /> : 
    <SpinnerWrapper>
        <children1 />
        <children2 />
        ...
    </SpinnerWrapper>

If you do not want to do this, you probably have to re-study the way you are rendering your components.