diff --git a/designer/client/src/components/modals/MoreScenarioDetailsDialog.tsx b/designer/client/src/components/modals/MoreScenarioDetailsDialog.tsx index 8d93f638e7a..8180e85a81a 100644 --- a/designer/client/src/components/modals/MoreScenarioDetailsDialog.tsx +++ b/designer/client/src/components/modals/MoreScenarioDetailsDialog.tsx @@ -1,4 +1,4 @@ -import { Box, styled, Typography } from "@mui/material"; +import { Box, Skeleton, styled, Typography } from "@mui/material"; import { WindowButtonProps, WindowContentProps } from "@touk/window-manager"; import React, { useMemo } from "react"; import { useTranslation } from "react-i18next"; @@ -11,6 +11,7 @@ import { capitalize, startCase } from "lodash"; import { getProcessingModeVariantName } from "../toolbars/scenarioDetails/getProcessingModeVariantName"; import NuLogoIcon from "../../assets/img/nussknacker-logo-icon.svg"; import { useGetAllCombinations } from "../useGetAllCombinations"; +import LoaderSpinner from "../spinner/Spinner"; const ItemWrapperStyled = styled("div")({ display: "grid", gridAutoColumns: "minmax(0, 1fr)", gridAutoFlow: "column" }); @@ -39,7 +40,7 @@ function MoreScenarioDetailsDialog(props: WindowContentProps) ], [props, t], ); - const { isAllCombinationsLoading, isCategoryFieldVisible } = useGetAllCombinations({ + const { isCategoryFieldVisible, isAllCombinationsLoading } = useGetAllCombinations({ processCategory: scenario.processCategory, processingMode: scenario.processingMode, processEngine: scenario.engineSetupName, @@ -48,6 +49,10 @@ function MoreScenarioDetailsDialog(props: WindowContentProps) const displayStatus = !scenario.isArchived && !scenario.isFragment; const displayLabels = scenario.labels.length !== 0; + if (isAllCombinationsLoading) { + return ; + } + return ( ) {i18next.t("scenarioDetails.label.processingMode", "Processing mode")} {getProcessingModeVariantName(scenario.processingMode)} - {isAllCombinationsLoading && isCategoryFieldVisible && ( + {isCategoryFieldVisible && ( {i18next.t("scenarioDetails.label.category", "Category")} {scenario.processCategory}