Add loader to service filter in Assets

src/components/Assets/FilterMenu/index.tsx

@@ -1,5 +1,6 @@
 import { ChangeEvent, useState } from "react";
 import { Checkbox } from "../../common/Checkbox";
+import { NewCircleLoader } from "../../common/NewCircleLoader";
 import { Tooltip } from "../../common/Tooltip";
 import { CrossIcon } from "../../common/icons/CrossIcon";
 import { MagnifierIcon } from "../../common/icons/MagnifierIcon";
@@ -27,24 +28,17 @@ export const FilterMenu = (props: FilterMenuProps) => {
 
   const selectedItems = props.items.filter((x) => x.selected);
 
-  return (
-    <s.Container>
-      <s.Header>
-        {props.title}
-        <s.CloseButton onClick={handleCloseButtonClick}>
-          <CrossIcon color={"currentColor"} size={14} />
-        </s.CloseButton>
-      </s.Header>
-      <s.SearchInputContainer>
-        <s.SearchInputIconContainer>
-          <MagnifierIcon color={"currentColor"} size={14} />
-        </s.SearchInputIconContainer>
-        <s.SearchInput
-          placeholder={"Search"}
-          onChange={handleSearchInputChange}
-        />
-      </s.SearchInputContainer>
-      <s.ContentContainer>
+  const renderContent = () => {
+    if (props.isLoading) {
+      return (
+        <s.EmptyStateContainer>
+          <NewCircleLoader size={24} />
+        </s.EmptyStateContainer>
+      );
+    }
+
+    return (
+      <>
         {selectedItems.length > 0 && (
           <s.TagsContainer>
             {selectedItems.map((x) => (
@@ -74,7 +68,28 @@ export const FilterMenu = (props: FilterMenuProps) => {
             </s.ListItem>
           ))}
         </s.List>
-      </s.ContentContainer>
+      </>
+    );
+  };
+
+  return (
+    <s.Container>
+      <s.Header>
+        {props.title}
+        <s.CloseButton onClick={handleCloseButtonClick}>
+          <CrossIcon color={"currentColor"} size={14} />
+        </s.CloseButton>
+      </s.Header>
+      <s.SearchInputContainer>
+        <s.SearchInputIconContainer>
+          <MagnifierIcon color={"currentColor"} size={14} />
+        </s.SearchInputIconContainer>
+        <s.SearchInput
+          placeholder={"Search"}
+          onChange={handleSearchInputChange}
+        />
+      </s.SearchInputContainer>
+      <s.ContentContainer>{renderContent()}</s.ContentContainer>
     </s.Container>
   );
 };

src/components/Assets/FilterMenu/styles.ts

@@ -153,6 +153,7 @@ export const ContentContainer = styled.div`
   flex-direction: column;
   overflow: auto;
   gap: 8px;
+  flex-grow: 1;
 `;
 
 export const TagsContainer = styled.div`
@@ -193,3 +194,10 @@ export const ListItem = styled.li`
   box-sizing: border-box;
   list-style-type: none;
 `;
+
+export const EmptyStateContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+`;

src/components/Assets/FilterMenu/types.ts

@@ -9,4 +9,5 @@ export interface FilterMenuProps {
   items: MenuItem[];
   onItemClick: (value: string) => void;
   onClose: () => void;
+  isLoading: boolean;
 }

src/components/Assets/index.tsx

@@ -36,12 +36,14 @@ export const Assets = () => {
   const [selectedAssetTypeId, setSelectedAssetTypeId] = useState<string | null>(
     null
   );
-  const [services, setServices] = useState<string[]>([]);
+  const [services, setServices] = useState<string[]>();
+  const [areServicesLoading, setAreServicesLoading] = useState(false);
   const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState<number>();
   const [selectedServices, setSelectedServices] = useState<string[]>([]);
   const previousSelectedServices = usePrevious(selectedServices);
   const [isServiceMenuOpen, setIsServiceMenuOpen] = useState(false);
   const config = useContext(ConfigContext);
+  const previousEnvironment = usePrevious(config.environment);
 
   const backendVersion = config.backendInfo?.applicationVersion;
 
@@ -57,17 +59,25 @@ export const Assets = () => {
     window.sendMessageToDigma({
       action: actions.GET_SERVICES
     });
+    setAreServicesLoading(true);
 
     const handleServicesData = (data: unknown, timeStamp: number) => {
-      const services = (data as ServiceData).services;
-      setServices(services);
+      const serviceData = data as ServiceData;
       setLastSetDataTimeStamp(timeStamp);
-      if (lastSetDataTimeStamp === undefined) {
-        const selectedServices = services.filter((x) =>
-          preselectedServices.includes(x)
-        );
-        setSelectedServices(selectedServices);
+      if (services === undefined) {
+        setSelectedServices((selectedServices) => {
+          const oldSelectedServices = Array.isArray(selectedServices)
+            ? selectedServices
+            : preselectedServices;
+
+          const newSelectedServices = serviceData.services.filter((x) =>
+            oldSelectedServices.includes(x)
+          );
+          return newSelectedServices;
+        });
       }
+      setServices(serviceData.services);
+      setAreServicesLoading(false);
     };
 
     dispatcher.addActionListener(actions.SET_SERVICES, handleServicesData);
@@ -77,6 +87,19 @@ export const Assets = () => {
     };
   }, []);
 
+  useEffect(() => {
+    if (
+      isString(previousEnvironment) &&
+      previousEnvironment !== config.environment
+    ) {
+      setServices(undefined);
+      window.sendMessageToDigma({
+        action: actions.GET_SERVICES
+      });
+      setAreServicesLoading(true);
+    }
+  }, [previousEnvironment, config.environment, services]);
+
   useEffect(() => {
     const timerId = window.setTimeout(() => {
       window.sendMessageToDigma({
@@ -120,7 +143,7 @@ export const Assets = () => {
     }
   };
 
-  const filterMenuItems = services.map((x) => ({
+  const filterMenuItems = (services || []).map((x) => ({
     label: x,
     value: x,
     selected: selectedServices.includes(x)
@@ -165,17 +188,20 @@ export const Assets = () => {
                 items={filterMenuItems}
                 onItemClick={handleServiceMenuItemClick}
                 onClose={handleServiceMenuClose}
+                isLoading={areServicesLoading}
               />
             }
             onOpenChange={setIsServiceMenuOpen}
             isOpen={isServiceMenuOpen}
-            placement={"bottom-start"}
+            placement={"bottom-end"}
           >
             <s.ServiceMenuButton>
               <s.ServiceMenuButtonLabel>
                 <FilterIcon color={"currentColor"} size={14} />
                 <span>Services</span>
-                {selectedServices.length > 0 ? (
+                {selectedServices &&
+                selectedServices.length > 0 &&
+                !areServicesLoading ? (
                   <s.Number>{selectedServices.length}</s.Number>
                 ) : (
                   <s.SelectedServiceNumberPlaceholder>

src/components/Assets/styles.ts

@@ -20,6 +20,7 @@ export const Header = styled.div`
   display: flex;
   gap: 8px;
   align-items: center;
+  justify-content: space-between;
   font-size: 16px;
   flex-shrink: 0;
   height: 36px;