From 4084d3a2508e17c330514a762ffaa01b21523109 Mon Sep 17 00:00:00 2001
From: TimofeyBoyko <fognir742@gmail.com>
Date: Tue, 19 Jul 2022 11:44:34 +0300
Subject: [PATCH] Web:Common:FilterInput: add loader for filter block

---
 .../FilterInput/sub-components/FilterBlock.js | 48 ++++++++++++-------
 1 file changed, 30 insertions(+), 18 deletions(-)

diff --git a/packages/asc-web-common/components/FilterInput/sub-components/FilterBlock.js b/packages/asc-web-common/components/FilterInput/sub-components/FilterBlock.js
index 76383fd723..6d50579192 100644
--- a/packages/asc-web-common/components/FilterInput/sub-components/FilterBlock.js
+++ b/packages/asc-web-common/components/FilterInput/sub-components/FilterBlock.js
@@ -1,5 +1,7 @@
 import React from "react";
 
+import Loaders from "../../Loaders";
+
 import Backdrop from "@appserver/components/backdrop";
 import Button from "@appserver/components/button";
 import Heading from "@appserver/components/heading";
@@ -37,6 +39,7 @@ const FilterBlock = ({
   });
   const [filterData, setFilterData] = React.useState([]);
   const [filterValues, setFilterValues] = React.useState([]);
+  const [isLoading, setIsLoading] = React.useState(false);
 
   const changeShowSelector = React.useCallback((isAuthor, group) => {
     setShowSelector((val) => {
@@ -180,6 +183,7 @@ const FilterBlock = ({
   );
 
   const getDefaultFilterData = React.useCallback(async () => {
+    setIsLoading(true);
     const data = await getFilterData();
 
     const items = data.filter((item) => item.isHeader === true);
@@ -238,6 +242,10 @@ const FilterBlock = ({
 
     setFilterData(items);
     setFilterValues(newFilterValues);
+
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 300);
   }, []);
 
   React.useEffect(() => {
@@ -368,24 +376,28 @@ const FilterBlock = ({
             />
           </StyledFilterBlockHeader>
           <div className="filter-body">
-            <Scrollbar className="filter-body__scrollbar" stype="mediumBlack">
-              {filterData.map((item) => {
-                return (
-                  <FilterBlockItem
-                    key={item.key}
-                    label={item.label}
-                    keyProp={item.key}
-                    group={item.group}
-                    groupItem={item.groupItem}
-                    isLast={item.isLast}
-                    withoutHeader={item.withoutHeader}
-                    withoutSeparator={item.withoutSeparator}
-                    changeFilterValue={changeFilterValue}
-                    showSelector={changeShowSelector}
-                  />
-                );
-              })}
-            </Scrollbar>
+            {isLoading ? (
+              <Loaders.FilterBlock />
+            ) : (
+              <Scrollbar className="filter-body__scrollbar" stype="mediumBlack">
+                {filterData.map((item) => {
+                  return (
+                    <FilterBlockItem
+                      key={item.key}
+                      label={item.label}
+                      keyProp={item.key}
+                      group={item.group}
+                      groupItem={item.groupItem}
+                      isLast={item.isLast}
+                      withoutHeader={item.withoutHeader}
+                      withoutSeparator={item.withoutSeparator}
+                      changeFilterValue={changeFilterValue}
+                      showSelector={changeShowSelector}
+                    />
+                  );
+                })}
+              </Scrollbar>
+            )}
           </div>
           {showFooter && (
             <StyledFilterBlockFooter>