add loading spinner and some ui changes

cognitedata · Jun 28, 2024 · 2c1857c · 2c1857c
1 parent 5466801
commit 2c1857c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 16 deletions.
diff --git a/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx b/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx
@@ -35,7 +35,8 @@ export const RuleBasedOutputsButton = ({
   const { t } = useTranslation();
   const models = use3dModels();
   const cadModels = models.filter((model) => model.type === 'cad') as CadModelOptions[];
-  const { isLoading } = useAssetMappedNodesForRevisions(cadModels);
+  const { isLoading: isAssetMappingsLoading } = useAssetMappedNodesForRevisions(cadModels);
+  const [isRuleLoading, setIsRuleLoading] = useState(false);
 
   const ruleInstancesResult = useFetchRuleInstances();
 
@@ -47,6 +48,9 @@ export const RuleBasedOutputsButton = ({
 
   const onChange = useCallback(
     (data: string | undefined): void => {
+
+      setIsRuleLoading(true);
+
       ruleInstances?.forEach((item) => {
         if (item === undefined) return;
         item.isEnabled = false;
@@ -74,23 +78,16 @@ export const RuleBasedOutputsButton = ({
         if (onRuleSetStylingChanged !== undefined) onRuleSetStylingChanged(undefined);
       }
 
-      console.log(' LOADING SELECTED RULE', selectedRule);
-
-      /* if (onRuleSetSelectedChanged !== undefined)
-        onRuleSetSelectedChanged(selectedRule, (isLoaded) => {
-          console.log(' LOADING IS LOADED FINALY', isLoaded);
-        });
- */
-
       if (callbackFunction !== undefined) callbackFunction(callbackLoaded);
+
       setEmptyRuleSelected(emptySelection);
       setCurrentRuleSetEnabled(selectedRule);
     },
     [ruleInstances, onRuleSetStylingChanged, onRuleSetSelectedChanged]
   );
 
   const callbackLoaded = (isLoaded: boolean): void => {
-    console.log(' LOADING IS LOADED FINALY', isLoaded);
+    setIsRuleLoading(!isLoaded);
   };
 
   const ruleSetStylingChanged = (
@@ -112,7 +109,7 @@ export const RuleBasedOutputsButton = ({
         appendTo={document.body}>
         <Dropdown
           placement="right-start"
-          disabled={isLoading}
+          disabled={isAssetMappingsLoading}
           content={
             <Menu
               style={{
@@ -127,6 +124,7 @@ export const RuleBasedOutputsButton = ({
                 label={t('RULESET_NO_SELECTION', 'No RuleSet selected')}
                 checked={currentRuleSetEnabled === undefined || emptyRuleSelected?.isEnabled}
                 onChange={onChange}
+                isLoading={isRuleLoading}
               />
               {ruleInstances?.map((item) => (
                 <RuleBasedSelectionItem
@@ -135,11 +133,17 @@ export const RuleBasedOutputsButton = ({
                   label={item?.rule?.properties.name}
                   checked={item?.isEnabled}
                   onChange={onChange}
+                  isLoading={isRuleLoading}
                 />
               ))}
             </Menu>
           }>
-          <Button icon="ColorPalette" aria-label="Select RuleSet" type="ghost" />
+          <Button
+            disabled={isAssetMappingsLoading}
+            icon="ColorPalette"
+            aria-label="Select RuleSet"
+            type="ghost"
+          />
         </Dropdown>
       </CogsTooltip>
       {ruleInstances !== undefined && ruleInstances?.length > 0 && (

diff --git a/react-components/src/components/RuleBasedOutputs/components/RuleBasedSelectionItem.tsx b/react-components/src/components/RuleBasedOutputs/components/RuleBasedSelectionItem.tsx
@@ -3,34 +3,45 @@
  */
 import { Flex, Icon, Menu, Radio } from '@cognite/cogs.js';
 import { type ReactElement } from 'react';
+import styled from 'styled-components';
 
 type RuleBasedSelectionItemProps = {
   onChange: (value: string | undefined) => void;
   label: string;
   id: string;
   checked: boolean | undefined;
   key: string;
+  isLoading: boolean;
 };
 export const RuleBasedSelectionItem = ({
   onChange,
   label,
   key,
   id,
-  checked
+  checked,
+  isLoading,
 }: RuleBasedSelectionItemProps): ReactElement => {
   return (
     <Menu.Item
       onClick={() => {
         onChange(id);
       }}
       key={key}>
-      <Flex justifyContent="space-between" alignItems="center" gap={8}>
+      <StyledFlex justifyContent="space-between" alignItems="center" gap={8}>
         <Flex gap={4} alignItems="center">
           <Icon type="ColorPalette" />
           {label}
         </Flex>
-        <Radio name={id ?? ''} value={id} checked={checked} />
-      </Flex>
+        {isLoading && checked === true ? (
+          <Icon type="Loader" />
+        ) : (
+          <Radio name={id ?? ''} value={id} checked={checked} />
+        )}
+      </StyledFlex>
     </Menu.Item>
   );
 };
+
+const StyledFlex = styled(Flex)`
+  min-height: 24px;
+`;