From a08db953b80e6b2a99eea71c3d3d5637c4f6a0e3 Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Fri, 16 May 2025 16:03:26 +0300
Subject: [PATCH] =?UTF-8?q?fix:=20now=20feature=20component=20is=20not=20l?=
 =?UTF-8?q?oaded=20before=20we=20have=20feature=20infor=E2=80=A6=20(#10012?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We were seeing strange errors when the feature component was rendered
before the feature data was returned from the backend. Now, we ensure
the component is not rendered until the feature is available.
---
 .../FeatureOverview/FeatureOverview.tsx       | 23 +++++++++++--------
 .../api/getters/useFeature/useFeature.ts      |  7 ++----
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx
index 6e7893be32..9dd63acc4b 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx
@@ -53,7 +53,10 @@ export const FeatureOverview = () => {
     const { splash } = useAuthSplash();
     const [showTooltip, setShowTooltip] = useState(false);
     const [hasClosedTooltip, setHasClosedTooltip] = useState(false);
-    const { feature, refetchFeature } = useFeature(projectId, featureId);
+    const { feature, refetchFeature, loading } = useFeature(
+        projectId,
+        featureId,
+    );
     const cleanupReminderEnabled = useUiFlag('cleanupReminder');
     const dragTooltipSplashId = 'strategy-drag-tooltip';
     const shouldShowStrategyDragTooltip = !splash?.[dragTooltipSplashId];
@@ -74,14 +77,16 @@ export const FeatureOverview = () => {
             ) : null}
             <StyledContainer>
                 <div>
-                    <FeatureOverviewMetaData
-                        hiddenEnvironments={hiddenEnvironments}
-                        onEnvironmentVisibilityChange={
-                            onEnvironmentVisibilityChange
-                        }
-                        feature={feature}
-                        onChange={refetchFeature}
-                    />
+                    {!loading ? (
+                        <FeatureOverviewMetaData
+                            hiddenEnvironments={hiddenEnvironments}
+                            onEnvironmentVisibilityChange={
+                                onEnvironmentVisibilityChange
+                            }
+                            feature={feature}
+                            onChange={refetchFeature}
+                        />
+                    ) : null}
                 </div>
                 <StyledMainContent>
                     <FeatureOverviewEnvironments
diff --git a/frontend/src/hooks/api/getters/useFeature/useFeature.ts b/frontend/src/hooks/api/getters/useFeature/useFeature.ts
index 46f8bf1b16..e5b19a6a63 100644
--- a/frontend/src/hooks/api/getters/useFeature/useFeature.ts
+++ b/frontend/src/hooks/api/getters/useFeature/useFeature.ts
@@ -1,10 +1,9 @@
-import type { SWRConfiguration } from 'swr';
+import useSWR, { type SWRConfiguration } from 'swr';
 import { useCallback } from 'react';
 import { emptyFeature } from './emptyFeature.ts';
 import handleErrorResponses from '../httpErrorResponseHandler.ts';
 import { formatApiPath } from 'utils/formatPath';
 import type { IFeatureToggle } from 'interfaces/featureToggle';
-import { useConditionalSWR } from '../useConditionalSWR/useConditionalSWR.ts';
 
 export interface IUseFeatureOutput {
     feature: IFeatureToggle;
@@ -26,9 +25,7 @@ export const useFeature = (
 ): IUseFeatureOutput => {
     const path = formatFeatureApiPath(projectId, featureId);
 
-    const { data, error, mutate } = useConditionalSWR<IFeatureResponse>(
-        Boolean(featureId && projectId),
-        { status: 404 },
+    const { data, error, mutate } = useSWR<IFeatureResponse>(
         ['useFeature', path],
         () => featureFetcher(path),
         options,