From ee9e55db0f2cd435d618644f467a36a2e224ddeb Mon Sep 17 00:00:00 2001
From: Wojciech Mista <wojciech.mista@saleor.io>
Date: Wed, 15 Dec 2021 11:50:35 +0100
Subject: [PATCH] Fix error when clicked on filter if list is loading (#1661)

* Fix error when clicked on filter if list is loading

* CR Fixes

* Update tests
---
 .../Filter/FilterContent/FilterContent.tsx       | 16 +++++++++-------
 .../Filter/FilterContent/FilterContentBody.tsx   |  5 +++++
 .../FilterContent/FilterContentBodyNameField.tsx |  4 ----
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/Filter/FilterContent/FilterContent.tsx b/src/components/Filter/FilterContent/FilterContent.tsx
index f4523b8fb..382b1d27b 100644
--- a/src/components/Filter/FilterContent/FilterContent.tsx
+++ b/src/components/Filter/FilterContent/FilterContent.tsx
@@ -220,12 +220,14 @@ const FilterContent: React.FC<FilterContentProps> = ({
                   classes={summaryClasses}
                   onClick={() => handleFilterOpen(filter)}
                 >
-                  <FilterContentBodyNameField
-                    filter={currentFilter}
-                    onFilterPropertyChange={action =>
-                      handleFilterPropertyGroupChange(action, filter)
-                    }
-                  />
+                  {currentFilter && (
+                    <FilterContentBodyNameField
+                      filter={currentFilter}
+                      onFilterPropertyChange={action =>
+                        handleFilterPropertyGroupChange(action, filter)
+                      }
+                    />
+                  )}
                 </AccordionSummary>
                 {currentFilter?.active && (
                   <FilterErrorsList
@@ -245,7 +247,7 @@ const FilterContent: React.FC<FilterContentProps> = ({
                         }
                         filter={{
                           ...getFilterFromCurrentData(filterField),
-                          active: currentFilter.active
+                          active: currentFilter?.active
                         }}
                       >
                         <Typography>{filterField.label}</Typography>
diff --git a/src/components/Filter/FilterContent/FilterContentBody.tsx b/src/components/Filter/FilterContent/FilterContentBody.tsx
index 0cd338d3b..88ecdcb19 100644
--- a/src/components/Filter/FilterContent/FilterContentBody.tsx
+++ b/src/components/Filter/FilterContent/FilterContentBody.tsx
@@ -5,6 +5,7 @@ import { FilterNumericField } from "@saleor/components/Filter/FilterContent/Filt
 import { FilterSingleSelectField } from "@saleor/components/Filter/FilterContent/FilterSingleSelectField";
 import { useCommonStyles } from "@saleor/components/Filter/FilterContent/utils";
 import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
+import Skeleton from "@saleor/components/Skeleton";
 import { makeStyles } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
@@ -60,6 +61,10 @@ const FilterContentBody: React.FC<FilterContentBodyProps> = ({
   const classes = useStyles({});
   const commonClasses = useCommonStyles({});
 
+  if (!filter) {
+    return <Skeleton />;
+  }
+
   const isDateField = [FieldType.date, FieldType.dateTime].includes(
     filter.type
   );
diff --git a/src/components/Filter/FilterContent/FilterContentBodyNameField.tsx b/src/components/Filter/FilterContent/FilterContentBodyNameField.tsx
index ba6f907a8..a5fbe64b6 100644
--- a/src/components/Filter/FilterContent/FilterContentBodyNameField.tsx
+++ b/src/components/Filter/FilterContent/FilterContentBodyNameField.tsx
@@ -28,10 +28,6 @@ const FilterContentBodyNameField: React.FC<FilterContentBodyNameFieldProps> = ({
 }) => {
   const classes = useStyles({});
 
-  if (!filter) {
-    return null;
-  }
-
   return (
     <div className={classes.container}>
       <FormControlLabel