[@mantine/core] Indicator: Disable processing animation on disabled s…

…tate (#2410) * [@mantine/core] Indicator: Disable processing animation on disabled state. * [@mantine/core] Indicator: Move processing element.
mantinedev · Sep 10, 2022 · 667ab01 · 667ab01
1 parent d0573c8
commit 667ab01
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/src/mantine-core/src/Indicator/Indicator.story.tsx b/src/mantine-core/src/Indicator/Indicator.story.tsx
@@ -3,6 +3,7 @@ import { Avatar } from '../Avatar';
 import { Box } from '../Box';
 import { Group } from '../Group';
 import { Indicator } from './Indicator';
+import { Text } from '../Text';
 
 export default { title: 'Indicator' };
 
@@ -50,3 +51,29 @@ export const WithLabel = () => (
     </Indicator>
   </Box>
 );
+
+export const Processing = () => (
+  <Box sx={{ padding: 40 }}>
+    <Group position="center">
+      <Box>
+        <Text>Enabled</Text>
+        <Indicator inline dot processing size={12}>
+          <Avatar
+            size="lg"
+            src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=250&q=80"
+          />
+        </Indicator>
+      </Box>
+
+      <Box>
+        <Text>Disabled</Text>
+        <Indicator inline dot processing disabled size={12}>
+          <Avatar
+            size="lg"
+            src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=250&q=80"
+          />
+        </Indicator>
+      </Box>
+    </Group>
+  </Box>
+);
diff --git a/src/mantine-core/src/Indicator/Indicator.tsx b/src/mantine-core/src/Indicator/Indicator.tsx
@@ -121,9 +121,11 @@ export const Indicator = forwardRef<HTMLDivElement, IndicatorProps>((props, ref)
   return (
     <Box ref={ref} className={cx(classes.root, className)} {...others}>
       {isShowIndicator && (
-        <div className={cx(classes.indicator, classes.common)}>{renderLabel}</div>
+        <>
+          <div className={cx(classes.indicator, classes.common)}>{renderLabel}</div>
+          {processing && <div className={cx(classes.processing, classes.common)} />}
+        </>
       )}
-      {processing && <div className={cx(classes.processing, classes.common)} />}
       {children}
     </Box>
   );