1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-17 13:46:47 +02:00

fix: now feature component is not loaded before we have feature infor… (#10012)

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.
This commit is contained in:
Jaanus Sellin 2025-05-16 16:03:26 +03:00 committed by GitHub
parent e754212a39
commit a08db953b8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 14 deletions

View File

@ -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,6 +77,7 @@ export const FeatureOverview = () => {
) : null}
<StyledContainer>
<div>
{!loading ? (
<FeatureOverviewMetaData
hiddenEnvironments={hiddenEnvironments}
onEnvironmentVisibilityChange={
@ -82,6 +86,7 @@ export const FeatureOverview = () => {
feature={feature}
onChange={refetchFeature}
/>
) : null}
</div>
<StyledMainContent>
<FeatureOverviewEnvironments

View File

@ -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,