From bb5b322475de2df888316715776750ac4abdab36 Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Wed, 20 Dec 2023 14:59:41 +0200
Subject: [PATCH] fix: now project overview has skeleton instead of
 placeholders (#5696)

Removed `ref` dependency from `useLoading` hook, it was being overly
reactive and breaking skeleton.
---
 .../feature/FeatureToggleList/FeatureToggleListTable.tsx   | 7 +++++--
 frontend/src/hooks/useLoading.ts                           | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
index 1c941afa06..acbe3cea0d 100644
--- 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
index 194091bff3..11138d5f06 100644
--- 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;
 };