Merge pull request #729 from mirumee/fix/showing-skeleton-for-price-in-product-list

Fix skeleton showing for price in product list

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 => {
@@ -118,6 +116,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
     pageInfo,
     products,
     selected,
+    loading,
     sort,
     toggle,
     toggleAll,
@@ -137,11 +136,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;
@@ -445,13 +444,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>

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}

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>