Fix flickering

src/components/Assets/AssetList/AssetList.stories.tsx

@@ -39,7 +39,6 @@ const mockedConfig: ConfigContextData = {
 
 export const Default: Story = {
   args: {
-    onAssetCountChange: fn(),
     setRefresher: fn(),
     assetTypeId: "Endpoint"
   },
@@ -63,7 +62,6 @@ export const WithPerformanceImpact: Story = {
     )
   ],
   args: {
-    onAssetCountChange: fn(),
     setRefresher: fn(),
     assetTypeId: "Endpoint"
   },

src/components/Assets/AssetList/index.tsx

@@ -1,12 +1,13 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { DefaultTheme, useTheme } from "styled-components";
-import { DigmaMessageError } from "../../../api/types";
-import { dispatcher } from "../../../dispatcher";
-import { usePrevious } from "../../../hooks/usePrevious";
+import {
+  DataFetcherConfiguration,
+  useFetchData
+} from "../../../hooks/useFetchData";
+import { useMount } from "../../../hooks/useMount";
 import { useAssetsSelector } from "../../../store/assets/useAssetsSelector";
 import { useConfigSelector } from "../../../store/config/useConfigSelector";
 import { useStore } from "../../../store/useStore";
-import { isEnvironment } from "../../../typeGuards/isEnvironment";
 import { SCOPE_CHANGE_EVENTS } from "../../../types";
 import { changeScope } from "../../../utils/actions/changeScope";
 import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
@@ -20,8 +21,6 @@ import { PopoverTrigger } from "../../common/Popover/PopoverTrigger";
 import { ChevronIcon } from "../../common/icons/ChevronIcon";
 import { SortIcon } from "../../common/icons/SortIcon";
 import { Direction } from "../../common/icons/types";
-import { AssetFilterQuery } from "../AssetsFilter/types";
-import { ViewMode } from "../AssetsViewScopeConfiguration/types";
 import { actions } from "../actions";
 import { trackingEvents } from "../tracking";
 import { checkIfAnyFiltersApplied, getAssetTypeInfo } from "../utils";
@@ -31,13 +30,23 @@ import {
   AssetEntry,
   AssetListProps,
   AssetsData,
+  GetAssetsListDataPayload,
   SORTING_CRITERION,
-  SORTING_ORDER,
-  Sorting
+  SORTING_ORDER
 } from "./types";
 
 const PAGE_SIZE = 10;
 const REFRESH_INTERVAL = 10 * 1000; // in milliseconds
+const requestConfig: DataFetcherConfiguration = {
+  requestAction: actions.GET_DATA,
+  responseAction: actions.SET_DATA,
+  refreshOnPayloadChange: true,
+  refreshInterval: REFRESH_INTERVAL,
+  refreshWithInterval: true,
+  debounceDelay: 10,
+  refreshWithDebounce: true,
+  fetchOnMount: true
+};
 
 const getSortingMenuChevronColor = (theme: DefaultTheme) => {
   switch (theme.mode) {
@@ -90,36 +99,8 @@ const getSortingCriteria = (isImpactHidden: boolean) =>
     (x) => !(isImpactHidden && x === SORTING_CRITERION.PERFORMANCE_IMPACT)
   );
 
-const getData = (
-  assetTypeId: string,
-  page: number,
-  sorting: Sorting,
-  searchQuery: string,
-  filters: AssetFilterQuery,
-  viewMode: ViewMode,
-  scopeSpanCodeObjectId?: string
-) => {
-  window.sendMessageToDigma({
-    action: actions.GET_DATA,
-    payload: {
-      query: {
-        assetType: assetTypeId,
-        page,
-        pageSize: PAGE_SIZE,
-        sortBy: sorting.criterion,
-        sortOrder: sorting.order,
-        directOnly: viewMode === "children",
-        scopedSpanCodeObjectId: scopeSpanCodeObjectId,
-        ...(searchQuery.length > 0 ? { displayName: searchQuery } : {}),
-        ...(scopeSpanCodeObjectId ? { ...filters, services: [] } : filters)
-      }
-    }
-  });
-};
-
 export const AssetList = ({
   assetTypeId,
-  onAssetCountChange,
   setRefresher,
   onGoToAllAssets
 }: AssetListProps) => {
@@ -137,9 +118,6 @@ export const AssetList = ({
     setAssetsPage: setPage,
     setShowAssetsHeaderToolBox
   } = useStore.getState();
-  const previousData = usePrevious(data);
-  const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState<number>();
-  const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp);
   const [isSortingMenuOpen, setIsSortingMenuOpen] = useState(false);
   const theme = useTheme();
   const sortingMenuChevronColor = getSortingMenuChevronColor(theme);
@@ -150,115 +128,73 @@ export const AssetList = ({
     filteredCount
   );
   const listRef = useRef<HTMLUListElement>(null);
-  const refreshTimerId = useRef<number>();
+
   const { environment, backendInfo, scope } = useConfigSelector();
-  const previousEnvironment = usePrevious(environment);
-  const previousViewMode = usePrevious(viewMode);
   const scopeSpanCodeObjectId = scope?.span?.spanCodeObjectId;
-  const previousScopeSpanCodeObjectId = usePrevious(scopeSpanCodeObjectId);
   const isServicesFilterEnabled = !scopeSpanCodeObjectId;
   const isInitialLoading = !data;
 
-  const refreshData = useCallback(() => {
-    getData(
-      assetTypeId,
+  const payload = useMemo<GetAssetsListDataPayload>(
+    () => ({
+      query: {
+        assetType: assetTypeId,
+        page,
+        pageSize: PAGE_SIZE,
+        sortBy: sorting.criterion,
+        sortOrder: sorting.order,
+        scopedSpanCodeObjectId: scopeSpanCodeObjectId,
+        ...(search.length > 0 ? { displayName: search } : {}),
+        ...(scopeSpanCodeObjectId ? { ...filters, services: [] } : filters),
+        directOnly: viewMode === "children"
+      }
+    }),
+    [
       page,
-      sorting,
-      search,
+      assetTypeId,
       filters,
       viewMode,
-      scopeSpanCodeObjectId
-    );
-  }, [
-    page,
-    assetTypeId,
-    filters,
-    viewMode,
-    scopeSpanCodeObjectId,
-    search,
-    sorting
-  ]);
+      scopeSpanCodeObjectId,
+      search,
+      sorting
+    ]
+  );
 
-  const entries = data?.data ?? [];
+  const { data: fetchedData, getData: refreshData } = useFetchData<
+    GetAssetsListDataPayload,
+    AssetsData
+  >(requestConfig, payload);
 
-  const assetTypeInfo = getAssetTypeInfo(assetTypeId);
+  useMount(() => {
+    setShowAssetsHeaderToolBox(true);
+  });
+
+  useEffect(() => {
+    setRefresher(refreshData);
+  }, [refreshData, setRefresher]);
 
+  useEffect(() => {
+    if (fetchedData) {
+      setData(fetchedData);
+    }
+  }, [fetchedData, setData]);
+
+  const entries = data?.data ?? [];
+  const assetTypeInfo = getAssetTypeInfo(assetTypeId);
   const isImpactHidden = useMemo(
     () => !(backendInfo?.centralize && environment?.type === "Public"),
     [backendInfo?.centralize, environment?.type]
   );
-
-  const sortingCriteria = getSortingCriteria(isImpactHidden);
+  const sortingCriteria = useMemo(
+    () => getSortingCriteria(isImpactHidden),
+    [isImpactHidden]
+  );
 
   const areAnyFiltersApplied = checkIfAnyFiltersApplied(
     filters,
     search,
     isServicesFilterEnabled
   );
 
-  useEffect(() => {
-    refreshData();
-  }, [refreshData]);
-
-  useEffect(() => {
-    const handleAssetsData = (
-      data: unknown,
-      timeStamp: number,
-      error: DigmaMessageError | undefined
-    ) => {
-      if (!error) {
-        setData(data as AssetsData);
-      }
-      setLastSetDataTimeStamp(timeStamp);
-    };
-
-    dispatcher.addActionListener(actions.SET_DATA, handleAssetsData);
-    setShowAssetsHeaderToolBox(true);
-
-    return () => {
-      dispatcher.removeActionListener(actions.SET_DATA, handleAssetsData);
-      window.clearTimeout(refreshTimerId.current);
-    };
-  }, [setData, setShowAssetsHeaderToolBox]);
-
-  useEffect(() => {
-    if (data && previousData?.filteredCount !== data?.filteredCount) {
-      onAssetCountChange(data.filteredCount);
-    }
-  }, [previousData, data, onAssetCountChange]);
-
-  useEffect(() => {
-    setRefresher(refreshData);
-  }, [refreshData, setRefresher]);
-
-  useEffect(() => {
-    if (
-      (isEnvironment(previousEnvironment) &&
-        previousEnvironment.id !== environment?.id) ||
-      viewMode !== previousViewMode ||
-      previousScopeSpanCodeObjectId !== scopeSpanCodeObjectId
-    ) {
-      refreshData();
-    }
-  }, [
-    environment?.id,
-    previousEnvironment,
-    previousViewMode,
-    viewMode,
-    scopeSpanCodeObjectId,
-    previousScopeSpanCodeObjectId,
-    refreshData
-  ]);
-
-  useEffect(() => {
-    if (previousLastSetDataTimeStamp !== lastSetDataTimeStamp) {
-      window.clearTimeout(refreshTimerId.current);
-      refreshTimerId.current = window.setTimeout(() => {
-        refreshData();
-      }, REFRESH_INTERVAL);
-    }
-  }, [lastSetDataTimeStamp, previousLastSetDataTimeStamp, refreshData]);
-
   useEffect(() => {
     if (
       isImpactHidden &&

src/components/Assets/AssetList/types.ts

@@ -1,10 +1,10 @@
 import { Duration } from "../../../globals";
+import { AssetFilterQuery } from "../AssetsFilter/types";
 
 export interface AssetListProps {
   onGoToAllAssets: () => void;
   assetTypeId: string;
   setRefresher: (refresher: () => void) => void;
-  onAssetCountChange: (count: number) => void;
 }
 
 export enum SORTING_CRITERION {
@@ -71,3 +71,15 @@ export interface AssetsData {
   totalCount: number;
   filteredCount: number;
 }
+
+export interface GetAssetListDataQuery extends AssetFilterQuery {
+  assetType: string;
+  page: number;
+  pageSize: number;
+  sortBy: SORTING_CRITERION;
+  sortOrder: SORTING_ORDER;
+}
+
+export interface GetAssetsListDataPayload {
+  query: GetAssetListDataQuery;
+}

src/components/Assets/AssetTypeList/AssetTypeList.stories.tsx

@@ -21,7 +21,6 @@ type Story = StoryObj<typeof meta>;
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Default: Story = {
   args: {
-    onAssetCountChange: fn(),
     setRefresher: fn()
   },
   play: () => {
@@ -68,7 +67,6 @@ export const Default: Story = {
 
 export const Empty: Story = {
   args: {
-    onAssetCountChange: fn(),
     setRefresher: fn()
   },
   play: () => {
@@ -86,7 +84,6 @@ export const Empty: Story = {
 
 export const EmptyWithParents: Story = {
   args: {
-    onAssetCountChange: fn(),
     setRefresher: fn()
   },
   play: () => {

src/components/Assets/AssetTypeList/index.tsx

@@ -63,12 +63,8 @@ const getData = (
   });
 };
 
-const getAssetCount = (assetCategoriesData: AssetCategoriesData) =>
-  assetCategoriesData.assetCategories.reduce((acc, cur) => acc + cur.count, 0);
-
 export const AssetTypeList = ({
   setRefresher,
-  onAssetCountChange,
   onAssetTypeSelect
 }: AssetTypeListProps) => {
   const {
@@ -141,7 +137,6 @@ export const AssetTypeList = ({
 
   useEffect(() => {
     if (data && previousData !== data) {
-      onAssetCountChange(getAssetCount(data));
       const showNoDataWithParents = Boolean(
         data?.parents &&
           data.parents.length > 0 &&
@@ -150,7 +145,7 @@ export const AssetTypeList = ({
       setShowAssetsHeaderToolBox(!showNoDataWithParents);
       setShowNoDataWithParents(showNoDataWithParents);
     }
-  }, [previousData, data, onAssetCountChange, setShowAssetsHeaderToolBox]);
+  }, [previousData, data, setShowAssetsHeaderToolBox]);
 
   useEffect(() => {
     if (

src/components/Assets/AssetTypeList/types.ts

@@ -5,7 +5,6 @@ import { IconProps } from "../../common/icons/types";
 export interface AssetTypeListProps {
   onAssetTypeSelect: (assetTypeId: string) => void;
   setRefresher: (refresher: () => void) => void;
-  onAssetCountChange: (count: number) => void;
 }
 
 export interface AssetCategoriesData {