Learn React with TypeScript 3

Implementing the withLoader HOC

We're going to create a loader spinner component called withLoader that can be used with any component to indicate that the component is busy doing something:

1. Let's start by creating a new file called withLoader.tsx with the following content:

import * as React from "react";interface IProps {  loading: boolean;}const withLoader = <P extends object>(  Component: React.ComponentType<P>): React.SFC<P & IProps> => ({ loading, ...props }: IProps) =>  // TODO - return a loading spinner if loading is true otherwise return the component passed in export default withLoader;

There are a few things going on here, so let's break this down:

• withLoader is a function that that takes in a component of type P.
• withLoader calls ...