Merge pull request #777 from SquirrelCorporation/chore-bump-libs

[CHORE] Delete unused animation JSON file & bump libs

client/package.json

@@ -50,8 +50,7 @@
     "@ant-design/pro-components": "^2.8.6",
     "@ant-design/use-emotion-css": "1.0.4",
     "@antv/g2plot": "^2.4.32",
-    "@dotlottie/react-player": "^1.6.19",
-    "@monaco-editor/react": "^4.6.0",
+    "@lottiefiles/dotlottie-react": "^0.13.0",
     "@umijs/max": "^4.4.5",
     "@umijs/plugin-antd-dayjs": "^0.3.0",
     "@umijs/route-utils": "^4.0.1",
@@ -60,9 +59,10 @@
     "buffer": "^6.0.3",
     "classnames": "^2.5.1",
     "dayjs": "^1.11.13",
-    "framer-motion": "^12.4.5",
+    "framer-motion": "^12.4.7",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
+    "@monaco-editor/react": "^4.7.0",
     "monaco-editor-webpack-plugin": "^7.1.0",
     "monaco-languageserver-types": "^0.4.0",
     "monaco-yaml": "^5.3.1",
@@ -71,7 +71,7 @@
     "rc-queue-anim": "^2.0.0",
     "rc-tween-one": "^3.0.6",
     "react": "^18.3.1",
-    "react-confetti": "^6.2.2",
+    "react-confetti": "^6.2.3",
     "react-dev-inspector": "^2.0.1",
     "react-dom": "^18.3.1",
     "react-helmet-async": "^2.0.5",
@@ -89,8 +89,8 @@
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@eslint/eslintrc": "^3.2.0",
-    "@eslint/js": "^9.20.0",
+    "@eslint/eslintrc": "^3.3.0",
+    "@eslint/js": "^9.21.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/classnames": "^2.3.4",
@@ -119,8 +119,8 @@
     "lint-staged": "^15.4.3",
     "mockjs": "^1.1.0",
     "node-fetch": "^3.3.2",
-    "prettier": "^3.5.1",
-    "ts-jest": "^29.2.5",
+    "prettier": "^3.5.2",
+    "ts-jest": "^29.2.6",
     "ts-node": "^10.9.2",
     "typescript": "^5.7.3",
     "vitest": "^3.0.6"

client/src/components/NewDeviceModal/AnimationPlayer.tsx

@@ -1,15 +1,33 @@
+import { DotLottie, DotLottieReact } from '@lottiefiles/dotlottie-react';
 import React from 'react';
-import { DotLottiePlayer, PlayMode } from '@dotlottie/react-player';
-
-const AnimationPlayer = () => (
-  <DotLottiePlayer
-    src="/Animation-1709649662243.json"
-    autoplay
-    loop
-    intermission={5000}
-    playMode={PlayMode.Bounce}
-    style={{ height: '90%', width: '90%', alignSelf: 'center' }}
-  />
-);
+
+const intermission = 5000;
+
+const AnimationPlayer = () => {
+  const [dotLottie, setDotLottie] = React.useState<DotLottie | null>(null);
+  React.useEffect(() => {
+    function onComplete() {
+      // Set a timeout to pause for the intermission duration, then replay the animation
+      setTimeout(() => dotLottie?.play(), intermission);
+    }
+
+    // Add the event listener for the complete event
+    dotLottie?.addEventListener('complete', onComplete);
+
+    return () => {
+      dotLottie?.removeEventListener('complete', onComplete);
+    };
+  }, [dotLottie]);
+  return (
+    <DotLottieReact
+      dotLottieRefCallback={setDotLottie}
+      src="/lotties/squirrel_find_nut.lottie"
+      autoplay
+      loop={false}
+      mode={'bounce'}
+      style={{ height: '90%', width: '90%', alignSelf: 'center' }}
+    />
+  );
+};
 
 export default AnimationPlayer;

client/src/components/PlaybookExecutionModal/PlaybookExecutionTerminalModal.tsx

@@ -7,18 +7,10 @@ import TerminalCore, {
 } from '@/components/Terminal/TerminalCore';
 import { getAnsibleSmartFailure } from '@/services/rest/ansible';
 import { ClockCircleOutlined, ThunderboltOutlined } from '@ant-design/icons';
-import {
-  DotLottieCommonPlayer,
-  DotLottiePlayer,
-} from '@dotlottie/react-player';
+import { DotLottie, DotLottieReact } from '@lottiefiles/dotlottie-react';
+
 import { Button, Col, Modal, notification, Row, Steps, Typography } from 'antd';
-import React, {
-  LegacyRef,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { API, SsmAnsible } from 'ssm-shared-lib';
 
 export interface PlaybookExecutionTerminalModalHandles {
@@ -71,13 +63,13 @@ const PlaybookExecutionTerminalModal = React.forwardRef<
     const timerIdRef = useRef();
     const [hasReachedFinalStatus, setHasReachedFinalStatus] = useState(false);
     const terminalRef = useRef<TerminalCoreHandles>(null);
-    const lottieRef = useRef<DotLottieCommonPlayer>();
+    const [dotLottie, setDotLottie] = useState<DotLottie | null>(null);
     const [api, contextHolder] = notification.useNotification();
 
     useEffect(() => {
       if (hasReachedFinalStatus) {
         terminalRef?.current?.onDataIn('# Playbook execution finished', true);
-        lottieRef.current?.stop();
+        dotLottie?.stop();
       }
     }, [hasReachedFinalStatus]);
 
@@ -145,6 +137,7 @@ const PlaybookExecutionTerminalModal = React.forwardRef<
       const pollingCallback = () => terminalHandler.pollingCallback(execId);
 
       const startPolling = () => {
+        dotLottie?.play();
         terminalRef?.current?.onDataIn(
           '---\n' +
             '#  ,;;:;,\n' +
@@ -208,12 +201,12 @@ const PlaybookExecutionTerminalModal = React.forwardRef<
           open={isOpen}
           title={
             <div style={{ verticalAlign: 'center' }}>
-              <DotLottiePlayer
-                ref={lottieRef as LegacyRef<DotLottieCommonPlayer>}
-                src="/Animation-1705922266332.lottie"
+              <DotLottieReact
+                dotLottieRefCallback={setDotLottie}
+                src="/lotties/running_squirrel.lottie"
                 autoplay
                 loop
-                style={{ height: '5%', width: '5%', display: 'inline-block' }}
+                style={{ height: '8%', width: '8%', display: 'inline-block' }}
               />
               <div
                 style={{