DEV Community

Discussion on: Stop using loading spinners

View post
Collapse
 
amirault profile image
Tony Amirault • • Edited

Hello thank for this very interresting article!

After testing some cases i find out that

export type LoadingProps<PropsOnceLoaded> =
    | ({ loading: true } & Never<PropsOnceLoaded>)
    | ({ loading: false } & PropsOnceLoaded)
Enter fullscreen mode Exit fullscreen mode

Allow us to access to the root of PropsOnceLoaded and not the subfields.
Why allowing root access ? why usingNever<PropsOnceLoaded> instead of just using { loading: true } without it ?

What do you think about this one ? seems more convenient for me, don't you think ?

export type LoadingProps<PropsOnceLoaded> =
    | ({ loading: true })
    | ({ loading: false } & PropsOnceLoaded)
Enter fullscreen mode Exit fullscreen mode

In this way you can't access to the root of the PropsOnceLoaded

Thank you in advance for your response!

Collapse
 
nandotherojo profile image
Fernando Rojo •

This is a fantastic question. The reason is, this way you can destructure your props in the component. Try doing it your way, and then see what happens to TypeScript in the component if you try to destructure props.artist.

By using never or undefined, we allow ourselves to at least see the destructured variables in the component.

However, you are correct. Your example is the safest. You’ll just have to make sure that you always check for props.loading before using props.artist.

Since my example fixes this at the consumption step of the component, it isn’t technically needed.

Hope that helps!