💫 Add animations to the PingModule

src/components/modules/ping/PingModule.tsx

@@ -1,5 +1,6 @@
 import { Indicator, Tooltip } from '@mantine/core';
 import axios from 'axios';
+import { motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
 import { Plug } from 'tabler-icons-react';
 import { useConfig } from '../../../tools/state';
@@ -39,6 +40,12 @@ export default function PingComponent(props: any) {
       radius="lg"
       style={{ position: 'absolute', bottom: 20, right: 20 }}
       label={isOnline === 'loading' ? 'Loading...' : isOnline === 'online' ? 'Online' : 'Offline'}
+    >
+      <motion.div
+        animate={{
+          scale: isOnline === 'online' ? [1, 0.8, 1] : 1,
+        }}
+        transition={{ repeat: Infinity, duration: 2.5, ease: 'easeInOut' }}
       >
         <Indicator
           size={13}
@@ -46,6 +53,7 @@ export default function PingComponent(props: any) {
         >
           {null}
         </Indicator>
+      </motion.div>
     </Tooltip>
   );
 }