diff --git a/src/components/Configs/ConfigDetailsTabs.tsx b/src/components/Configs/ConfigDetailsTabs.tsx index 2445dcf44..78f8f0864 100644 --- a/src/components/Configs/ConfigDetailsTabs.tsx +++ b/src/components/Configs/ConfigDetailsTabs.tsx @@ -45,7 +45,7 @@ export function ConfigDetailsTabs({ const { data: configItem, isLoading: isLoadingConfig } = useGetConfigByIdQuery(id!); - const configTabList = useConfigDetailsTabs(configItem?.summary); + const { tabs: configTabList } = useConfigDetailsTabs(configItem?.summary); return ( <> diff --git a/src/components/Configs/ConfigTabsLinks.tsx b/src/components/Configs/ConfigTabsLinks.tsx index 25ab7d134..264c986d7 100644 --- a/src/components/Configs/ConfigTabsLinks.tsx +++ b/src/components/Configs/ConfigTabsLinks.tsx @@ -14,12 +14,18 @@ type ConfigDetailsTab = { search?: string; }; -export function useConfigDetailsTabs( - countSummary?: ConfigItem["summary"] -): ConfigDetailsTab[] { +export function useConfigDetailsTabs(countSummary?: ConfigItem["summary"]): { + isLoading: boolean; + isError: boolean; + tabs: ConfigDetailsTab[]; +} { const { id } = useParams<{ id: string }>(); - const { data: views = [] } = useQuery({ + const { + data: views = [], + isLoading, + isError + } = useQuery({ queryKey: ["views", id], queryFn: () => getViewsByConfigId(id!), enabled: !!id @@ -105,9 +111,9 @@ export function useConfigDetailsTabs( })); if (viewTabs.length === 0) { - return staticTabs; + return { isLoading, isError, tabs: staticTabs }; } // Views configured for a config should appear ahead of the built-in tabs. - return [...viewTabs, ...staticTabs]; + return { isLoading, isError, tabs: [...viewTabs, ...staticTabs] }; } diff --git a/src/pages/config/details/ConfigDetailsIndexRedirect.tsx b/src/pages/config/details/ConfigDetailsIndexRedirect.tsx index ae70845a7..31b2adf8e 100644 --- a/src/pages/config/details/ConfigDetailsIndexRedirect.tsx +++ b/src/pages/config/details/ConfigDetailsIndexRedirect.tsx @@ -17,9 +17,17 @@ export function ConfigDetailsIndexRedirect() { isError: isConfigError } = useGetConfigByIdQuery(idParam); - const tabs = useConfigDetailsTabs(configDetails?.summary); + const { + tabs, + isLoading, + isError: isViewsError + } = useConfigDetailsTabs(configDetails?.summary); useEffect(() => { + if (isLoading || isViewsError) { + return; + } + if (!id || tabs.length === 0) { return; } @@ -37,9 +45,17 @@ export function ConfigDetailsIndexRedirect() { }, { replace: true } ); - }, [id, tabs, navigate, location.pathname, location.search]); + }, [ + isLoading, + isViewsError, + id, + tabs, + navigate, + location.pathname, + location.search + ]); - if (isConfigLoading) { + if (isConfigLoading || isLoading) { return (
@@ -47,10 +63,10 @@ export function ConfigDetailsIndexRedirect() { ); } - if (isConfigError) { + if (isConfigError || isViewsError) { return (
- Failed to load config + Failed to load config or views
); } diff --git a/src/pages/config/details/ConfigDetailsViewPage.tsx b/src/pages/config/details/ConfigDetailsViewPage.tsx index 7c1abda04..141708f45 100644 --- a/src/pages/config/details/ConfigDetailsViewPage.tsx +++ b/src/pages/config/details/ConfigDetailsViewPage.tsx @@ -29,7 +29,7 @@ export function ConfigDetailsViewPage() {