fixed rendeing issue for stack tab in components

Author: talhainvenxion

src/ui/layouts/stacks/Stacks/List/index.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { translate } from '../translate';
 import { CollapseTable } from '../../../common/CollapseTable';
-import { useHistory, useSelector } from '../../../../hooks';
+import { useDispatch, useHistory, useSelector } from '../../../../hooks';
 import { routePaths } from '../../../../../routes/routePaths';
 
 import { useService } from './useService';
@@ -13,6 +13,7 @@ import {
   stackSelectors,
 } from '../../../../../redux/selectors';
 import { callActionForStacksForPagination } from '../useService';
+import { stacksActions } from '../../../../../redux/actions';
 
 interface Props {
   filter: any;
@@ -29,6 +30,11 @@ export const List: React.FC<Props> = ({
   stackComponentId,
 }: Props) => {
   const history = useHistory();
+  const dispatch = useDispatch();
+  const [
+    fetchingForStacksFroComponents,
+    setFetchingForStacksFroComponents,
+  ] = useState(false);
   const { dispatchStackData } = callActionForStacksForPagination();
   const ITEMS_PER_PAGE = parseInt(
     process.env.REACT_APP_ITEMS_PER_PAGE as string,
@@ -50,12 +56,18 @@ export const List: React.FC<Props> = ({
 
   useEffect(() => {
     if (stackComponentId) {
-      dispatchStackData(
-        1,
-        ITEMS_PER_PAGE ? ITEMS_PER_PAGE : DEFAULT_ITEMS_PER_PAGE,
-        filter,
-        activeSortingDirection?.toLowerCase() + ':' + activeSorting,
-        stackComponentId,
+      setFetchingForStacksFroComponents(true);
+      dispatch(
+        stacksActions.getMy({
+          component_id: stackComponentId,
+          sort_by: 'desc:created',
+          logical_operator: 'and',
+          page: 1,
+          size: ITEMS_PER_PAGE ? ITEMS_PER_PAGE : DEFAULT_ITEMS_PER_PAGE,
+          workspace: selectedWorkspace,
+          onSuccess: () => setFetchingForStacksFroComponents(false),
+          onFailure: () => setFetchingForStacksFroComponents(false),
+        }),
       );
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -105,7 +117,7 @@ export const List: React.FC<Props> = ({
   //     );
   //   }
   // };
-
+  console.log(filter, 'filfilterter');
   return (
     <>
       <CollapseTable
@@ -129,7 +141,13 @@ export const List: React.FC<Props> = ({
         // }
         pagination={pagination}
         paginated={stacksPaginated}
-        loading={expendedRow.length > 0 ? false : fetching}
+        loading={
+          expendedRow.length > 0
+            ? false
+            : filter[0].value || !stackComponentId
+            ? fetching
+            : fetchingForStacksFroComponents
+        }
         showHeader={true}
         filters={filter}
         headerCols={headerCols}