In this section, we are going to add a loading spinner to the Products page. Before we can do this, we are going to extract the list of products out into its own component. We can then add the withLoader HOC to the extracted component:

1. Let's create a new file for the extracted component called ProductsList.tsx with the following imports:

import * as React from "react";
import { Link } from "react-router-dom";
import { IProduct } from "./ProductsData";
import withLoader from "./withLoader";

2. The component will take in props for the products array and the search string:

interface IProps {
  products?: IProduct[];
  search: string;
}

3. We'll call the component ProductList and it will be an SFC. Let's start to create the component:

const ProductsList: React.SFC<IProps> = props => {
  const search = props.search;
  return ();
};

4. We can now move the ul tag from the ProductsPage component JSX into our return statement in our new ProductList component:

return (
  <ul className="product-list">
    {props.products &&
      props.products.map(product => {
        if (
          !search ||
          (search &&
            product.name.toLowerCase().indexOf(search.toLowerCase()) 
            > -1)
        ) {
          return (
            <li key={product.id} className="product-list-item">
              <Link to={`/products/${product.id}`}>{product.name}
              </Link>
            </li>
          );
        } else {
          return null;
        }
      })}
  </ul>
);

Note that we remove references to this after moving the JSX.

5. To finish off the ProductList component, let's export it wrapped with our withLoader HOC:

export default withLoader(ProductsList);

6. Let's change the return statement in ProductPage.tsx to reference the extracted component:

return (
  <div className="page-container">
    <p>
      Welcome to React Shop where you can get all your tools for ReactJS!
    </p>
    <ProductsList
      search={search}
      products={this.props.products}
      loading={this.props.loading}
    />
  </div>
);

7. We mustn't forget to import the ProductsList component having referenced it:

import ProductsList from "./ProductsList";

8. Finally, we can remove the imported Link component in ProductsPage.tsx as this is no longer referenced.

If we go to the running app and browse to the Products page, we should now see a loading spinner while the products load:

So, our Products page is nicely wired up to our Redux store now. In the next section, we'll wire up the Product page to the store.