Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-21 13:47:39 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx
View File

@ -53,7 +53,10 @@ export const FeatureOverview = () => {
const { splash } = useAuthSplash(); const { splash } = useAuthSplash();
const [showTooltip, setShowTooltip] = useState(false); const [showTooltip, setShowTooltip] = useState(false);
const [hasClosedTooltip, setHasClosedTooltip] = 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 cleanupReminderEnabled = useUiFlag('cleanupReminder');
const dragTooltipSplashId = 'strategy-drag-tooltip'; const dragTooltipSplashId = 'strategy-drag-tooltip';
const shouldShowStrategyDragTooltip = !splash?.[dragTooltipSplashId]; const shouldShowStrategyDragTooltip = !splash?.[dragTooltipSplashId];
@ -74,14 +77,16 @@ export const FeatureOverview = () => {
) : null} ) : null}
<StyledContainer> <StyledContainer>
<div> <div>
<FeatureOverviewMetaData {!loading ? (
hiddenEnvironments={hiddenEnvironments} <FeatureOverviewMetaData
onEnvironmentVisibilityChange={ hiddenEnvironments={hiddenEnvironments}
onEnvironmentVisibilityChange onEnvironmentVisibilityChange={
} onEnvironmentVisibilityChange
feature={feature} }
onChange={refetchFeature} feature={feature}
/> onChange={refetchFeature}
/>
) : null}
</div> </div>
<StyledMainContent> <StyledMainContent>
<FeatureOverviewEnvironments <FeatureOverviewEnvironments

7
frontend/src/hooks/api/getters/useFeature/useFeature.ts
View File

@ -1,10 +1,9 @@
import type { SWRConfiguration } from 'swr'; import useSWR, { type SWRConfiguration } from 'swr';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { emptyFeature } from './emptyFeature.ts'; import { emptyFeature } from './emptyFeature.ts';
import handleErrorResponses from '../httpErrorResponseHandler.ts'; import handleErrorResponses from '../httpErrorResponseHandler.ts';
import { formatApiPath } from 'utils/formatPath'; import { formatApiPath } from 'utils/formatPath';
import type { IFeatureToggle } from 'interfaces/featureToggle'; import type { IFeatureToggle } from 'interfaces/featureToggle';
import { useConditionalSWR } from '../useConditionalSWR/useConditionalSWR.ts';
export interface IUseFeatureOutput { export interface IUseFeatureOutput {
feature: IFeatureToggle; feature: IFeatureToggle;
@ -26,9 +25,7 @@ export const useFeature = (
): IUseFeatureOutput => { ): IUseFeatureOutput => {
const path = formatFeatureApiPath(projectId, featureId); const path = formatFeatureApiPath(projectId, featureId);
const { data, error, mutate } = useConditionalSWR<IFeatureResponse>( const { data, error, mutate } = useSWR<IFeatureResponse>(
Boolean(featureId && projectId),
{ status: 404 },
['useFeature', path], ['useFeature', path],
() => featureFetcher(path), () => featureFetcher(path),
options, options,