fix: now project overview has skeleton instead of placeholders (#5696)

Removed `ref` dependency from `useLoading` hook, it was being overly reactive and breaking skeleton.
Unleash · Dec 20, 2023 · bb5b322 · bb5b322
1 parent 1a79921
commit bb5b322
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
@@ -45,6 +45,7 @@ import { FeatureSegmentCell } from 'component/common/Table/cells/FeatureSegmentC
 import { useUiFlag } from 'hooks/useUiFlag';
 import { FeatureToggleListTable as LegacyFeatureToggleListTable } from './LegacyFeatureToggleListTable';
 import { FeatureToggleListActions } from './FeatureToggleListActions/FeatureToggleListActions';
+import useLoading from 'hooks/useLoading';
 
 export const featuresPlaceholder = Array(15).fill({
     name: 'Name of the feature',
@@ -107,6 +108,7 @@ const FeatureToggleListTableComponent: VFC = () => {
             value ? `${value}` : undefined,
         ),
     );
+    const bodyLoadingRef = useLoading(loading);
     const { favorite, unfavorite } = useFavoriteFeaturesApi();
     const onFavorite = useCallback(
         async (feature: FeatureSchema) => {
@@ -257,7 +259,6 @@ const FeatureToggleListTableComponent: VFC = () => {
 
     return (
         <PageContent
-            isLoading={loading}
             bodyClass='no-padding'
             header={
                 <PageHeader
@@ -311,7 +312,9 @@ const FeatureToggleListTableComponent: VFC = () => {
                 state={filterState}
             />
             <SearchHighlightProvider value={query || ''}>
-                <PaginatedTable tableInstance={table} totalItems={total} />
+                <div ref={bodyLoadingRef}>
+                    <PaginatedTable tableInstance={table} totalItems={total} />
+                </div>
             </SearchHighlightProvider>
             <ConditionallyRender
                 condition={rows.length === 0}

diff --git a/frontend/src/hooks/useLoading.ts b/frontend/src/hooks/useLoading.ts
@@ -16,7 +16,7 @@ const useLoading = (loading: boolean, selector = '[data-loading=true]') => {
                 }
             });
         }
-    }, [loading, ref]);
+    }, [loading]);
 
     return ref;
 };