From c182397dd9460b8d4d49b681729d531be0c6369b Mon Sep 17 00:00:00 2001
From: ajnart <thomascamlong@gmail.com>
Date: Wed, 18 May 2022 23:11:58 +0200
Subject: [PATCH] :dizzy: Add animations to the PingModule

---
 src/components/modules/ping/PingModule.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/modules/ping/PingModule.tsx b/src/components/modules/ping/PingModule.tsx
index 3a27bc73c..5fbce814a 100644
--- a/src/components/modules/ping/PingModule.tsx
+++ b/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';
@@ -40,12 +41,19 @@ export default function PingComponent(props: any) {
       style={{ position: 'absolute', bottom: 20, right: 20 }}
       label={isOnline === 'loading' ? 'Loading...' : isOnline === 'online' ? 'Online' : 'Offline'}
     >
-      <Indicator
-        size={13}
-        color={isOnline === 'online' ? 'green' : isOnline === 'down' ? 'red' : 'yellow'}
+      <motion.div
+        animate={{
+          scale: isOnline === 'online' ? [1, 0.8, 1] : 1,
+        }}
+        transition={{ repeat: Infinity, duration: 2.5, ease: 'easeInOut' }}
       >
-        {null}
-      </Indicator>
+        <Indicator
+          size={13}
+          color={isOnline === 'online' ? 'green' : isOnline === 'down' ? 'red' : 'yellow'}
+        >
+          {null}
+        </Indicator>
+      </motion.div>
     </Tooltip>
   );
 }