Update dots loader component

Updated Loader component to match animation and style as close as possible to v6

docs/yarn.lock

@@ -133,10 +133,10 @@
   version "0.0.0"
   uid ""
 
-"@mantine/[email protected]-beta.5":
-  version "7.0.0-beta.5"
-  resolved "https://registry.yarnpkg.com/@mantine/store/-/store-7.0.0-beta.5.tgz#24d55bf2dc45e33e9005e131b2944bbf3d19c263"
-  integrity sha512-smKxfat+Gne95qaMivjUJbifIxp4/ptxVnSkyw6RD580aspexRQOIGRtX/OeMmS6Yz9D5beLkl6Q1C/8/RHNhg==
+"@mantine/[email protected]":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@mantine/store/-/store-7.0.0.tgz#5e57b8ec98531446a4afb2afdc02dd411bd8d379"
+  integrity sha512-MliHi9TUe7fTLIzj3LWYEoQPkm3TbkmCUNBdynFrx0Ls+WoyNjW73RhxbiZB2KfHXs/tsYySA6mjMoSgUhkQDw==
 
 "@mantine/store@link:../src/mantine-store":
   version "0.0.0"

src/mantine-core/src/components/Loader/Loader.module.css

@@ -52,10 +52,12 @@
 @keyframes loader-dots-animation {
   0%,
   100% {
-    opacity: 1;
+    transform: scale(1);
+    opacity: 1;;
   }
 
   50% {
+    transform: scale(0.6);
     opacity: 0.5;
   }
 }
@@ -65,7 +67,6 @@
   justify-content: center;
   align-items: center;
   gap: calc(var(--loader-size) / 10);
-  flex-wrap: wrap;
   position: relative;
   width: var(--loader-size);
   height: var(--loader-size);
@@ -76,26 +77,10 @@
   height: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
   border-radius: 50%;
   background: var(--loader-color);
-  animation: loader-dots-animation 1200ms linear infinite;
-
-  &:nth-child(2),
-  &:nth-child(4) {
-    animation-delay: -400ms;
-  }
-
-  &:nth-child(3),
-  &:nth-child(5),
-  &:nth-child(7) {
-    animation-delay: -800ms;
-  }
-
-  &:nth-child(6),
-  &:nth-child(8) {
-    animation-delay: -1200ms;
-  }
+  animation: loader-dots-animation 0.8s infinite linear;
 
-  &:nth-child(9) {
-    animation-delay: -1600ms;
+  &:nth-child(2) {
+    animation-delay: 0.4s;
   }
 }
 

src/mantine-core/src/components/Loader/loaders/Dots.tsx

@@ -9,11 +9,5 @@ export const Dots: MantineLoaderComponent = forwardRef(({ className, ...others }
     <span className={classes.dot} />
     <span className={classes.dot} />
     <span className={classes.dot} />
-    <span className={classes.dot} />
-    <span className={classes.dot} />
-    <span className={classes.dot} />
-    <span className={classes.dot} />
-    <span className={classes.dot} />
-    <span className={classes.dot} />
   </Box>
 ));