NU-1890 provide spinner until categories visibility determined

TouK · Nov 21, 2024 · dbfd5d7 · dbfd5d7
1 parent 495e87c
commit dbfd5d7
Showing 1 changed file with 8 additions and 3 deletions.
diff --git 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<WindowKind, Props>)
         ],
         [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<WindowKind, Props>)
     const displayStatus = !scenario.isArchived && !scenario.isFragment;
     const displayLabels = scenario.labels.length !== 0;
 
+    if (isAllCombinationsLoading) {
+        return <LoaderSpinner show={true} />;
+    }
+
     return (
         <WindowContent
             {...props}
@@ -79,7 +84,7 @@ function MoreScenarioDetailsDialog(props: WindowContentProps<WindowKind, Props>)
                                 <ItemLabelStyled>{i18next.t("scenarioDetails.label.processingMode", "Processing mode")}</ItemLabelStyled>
                                 <Typography variant={"caption"}>{getProcessingModeVariantName(scenario.processingMode)}</Typography>
                             </ItemWrapperStyled>
-                            {isAllCombinationsLoading && isCategoryFieldVisible && (
+                            {isCategoryFieldVisible && (
                                 <ItemWrapperStyled>
                                     <ItemLabelStyled>{i18next.t("scenarioDetails.label.category", "Category")}</ItemLabelStyled>
                                     <Typography variant={"caption"}>{scenario.processCategory}</Typography>