Sample HOC for React Typescript

withLoadingSpinner.js

import React, { FC, FunctionComponent } from 'react';
import { LoadingSpinner } from '@components/LoadingSpinner';

interface IProps {
  isLoading: boolean;
}

// eslint-disable-next-line @typescript-eslint/ban-types, react/display-name
const WithLoadingSpinner = <P extends object>(Component: FunctionComponent<P>): FC<P & IProps> => ({
  isLoading,
  ...props
}: IProps): JSX.Element => {
  if (isLoading) return <LoadingSpinner />;
  return <Component {...(props as P)} />;
};

export default WithLoadingSpinner;