From 0faf70aea620dd0987560e8f16c5e1fdbba345de Mon Sep 17 00:00:00 2001
From: Magdalena Markusik <magdalena.markusik@mirumee.com>
Date: Wed, 23 Sep 2020 14:03:15 +0200
Subject: [PATCH 1/3] wip

---
 .../components/ProductList/ProductList.tsx     | 18 +++++++-----------
 .../ProductListPage/ProductListPage.tsx        |  1 +
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/products/components/ProductList/ProductList.tsx b/src/products/components/ProductList/ProductList.tsx
index 0a163a684..a45d0c456 100644
--- a/src/products/components/ProductList/ProductList.tsx
+++ b/src/products/components/ProductList/ProductList.tsx
@@ -118,6 +118,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
     pageInfo,
     products,
     selected,
+    loading,
     sort,
     toggle,
     toggleAll,
@@ -137,11 +138,11 @@ export const ProductList: React.FC<ProductListProps> = props => {
   );
   const numberOfColumns = 2 + settings.columns.length;
 
-  const getProductPrice = (
-    priceRangeUndiscounted: ProductList_products_edges_node_pricing_priceRangeUndiscounted
-  ) => {
+  const getProductPrice = product => {
+    const priceRangeUndiscounted = product?.pricing?.priceRangeUndiscounted;
+
     if (!priceRangeUndiscounted) {
-      return null;
+      return "-";
     }
 
     const { start, stop } = priceRangeUndiscounted;
@@ -182,6 +183,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
     }
   };
 
+  console.log(123, { loading });
   return (
     <div className={classes.tableContainer}>
       <ResponsiveTable className={classes.table}>
@@ -445,13 +447,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
                     displayColumns={settings.columns}
                   >
                     <TableCell className={classes.colPrice}>
-                      {product?.pricing?.priceRangeUndiscounted ? (
-                        getProductPrice(
-                          product?.pricing?.priceRangeUndiscounted
-                        )
-                      ) : (
-                        <Skeleton />
-                      )}
+                      {loading ? <Skeleton /> : getProductPrice(product)}
                     </TableCell>
                   </DisplayColumn>
                 </TableRow>
diff --git a/src/products/components/ProductListPage/ProductListPage.tsx b/src/products/components/ProductListPage/ProductListPage.tsx
index 8bc6b452c..892ddeceb 100644
--- a/src/products/components/ProductListPage/ProductListPage.tsx
+++ b/src/products/components/ProductListPage/ProductListPage.tsx
@@ -185,6 +185,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
         />
         <ProductList
           {...listProps}
+          loading={loading}
           gridAttributes={gridAttributes}
           settings={settings}
           onUpdateListSettings={onUpdateListSettings}

From 41209ce8dca72fbf84e26178b615a549db950613 Mon Sep 17 00:00:00 2001
From: Magdalena Markusik <magdalena.markusik@mirumee.com>
Date: Thu, 24 Sep 2020 14:33:14 +0200
Subject: [PATCH 2/3] fix types

---
 src/products/components/ProductList/ProductList.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/products/components/ProductList/ProductList.tsx b/src/products/components/ProductList/ProductList.tsx
index a45d0c456..22113f45f 100644
--- a/src/products/components/ProductList/ProductList.tsx
+++ b/src/products/components/ProductList/ProductList.tsx
@@ -22,10 +22,7 @@ import {
   isAttributeColumnValue
 } from "@saleor/products/components/ProductListPage/utils";
 import { GridAttributes_grid_edges_node } from "@saleor/products/types/GridAttributes";
-import {
-  ProductList_products_edges_node,
-  ProductList_products_edges_node_pricing_priceRangeUndiscounted
-} from "@saleor/products/types/ProductList";
+import { ProductList_products_edges_node } from "@saleor/products/types/ProductList";
 import { ProductListUrlSortField } from "@saleor/products/urls";
 import { ListActions, ListProps, SortPage } from "@saleor/types";
 import TDisplayColumn, {
@@ -106,6 +103,7 @@ interface ProductListProps
   activeAttributeSortId: string;
   gridAttributes: GridAttributes_grid_edges_node[];
   products: ProductList_products_edges_node[];
+  loading: boolean;
 }
 
 export const ProductList: React.FC<ProductListProps> = props => {
@@ -183,7 +181,6 @@ export const ProductList: React.FC<ProductListProps> = props => {
     }
   };
 
-  console.log(123, { loading });
   return (
     <div className={classes.tableContainer}>
       <ResponsiveTable className={classes.table}>

From dbbb0ac990e8f8fd094ceaf5a076a4b39b731b38 Mon Sep 17 00:00:00 2001
From: Magdalena Markusik <magdalena.markusik@mirumee.com>
Date: Thu, 24 Sep 2020 14:56:42 +0200
Subject: [PATCH 3/3] fix tests

---
 src/storybook/__snapshots__/Stories.test.ts.snap | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 33ab804f4..bde8e7de7 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -164589,11 +164589,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                  >
-                    ‌
-                  </span>
+                  -
                 </td>
               </tr>
             </tbody>