lottie-react

assets/css/style.css

@@ -341,26 +341,14 @@ nav i.backBtn:hover {
     -ms-user-select: none;
     user-select: none;
 }
-.settings .loading {
+.settings .lottie {
     display: flex;
     justify-content: center;
     align-items: center;
     float: right;
     width: 100%;
     height: 100vh;
 }
-.settings .loading .spinner {
-    animation: spinner 0.8s linear infinite;
-    border: 2px solid #FFA200;
-    border-right-color: transparent;
-    border-radius: 100%;
-    display: inline-block;
-    overflow: hidden;
-    text-indent: -9999px;
-    vertical-align: middle;
-    width: 18px;
-    height: 18px;
-}
 .settings .item {
     float: right;
     width: 100%;

assets/json/1713988096625.json

@@ -0,0 +1 @@
+{"nm":"Ella Shimmer","ddd":0,"h":300,"w":300,"meta":{"g":"LottieFiles AE 3.0.2"},"layers":[{"ty":3,"nm":"Null 1","sr":1,"st":0,"op":94,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[-100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[150,150,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":0,"ix":11}},"ef":[],"ind":1},{"ty":0,"nm":"Comp 1","sr":1,"st":62,"op":152,"ip":62,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[100,50,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[150,175,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"w":200,"h":100,"refId":"comp_0","ind":2},{"ty":0,"nm":"Comp 1","sr":1,"st":30,"op":120,"ip":30,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[100,50,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.069,"y":0.995},"s":[100,100,100],"t":62},{"o":{"x":0.333,"y":0},"i":{"x":0.833,"y":1},"s":[80,80,100],"t":76},{"s":[80,80,100],"t":94}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.182,"y":1},"s":[0,25,0],"t":62,"ti":[0,8.583,0],"to":[0,-8.583,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.182,"y":0.182},"s":[0,-26.5,0],"t":76,"ti":[0,0,0],"to":[0,0,0]},{"s":[0,-26.5,0],"t":94}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":62},{"o":{"x":0.167,"y":0},"i":{"x":0.833,"y":1},"s":[60],"t":76},{"s":[60],"t":94}],"ix":11}},"ef":[],"w":200,"h":100,"refId":"comp_0","ind":3,"parent":1},{"ty":0,"nm":"Comp 1","sr":1,"st":-2,"op":88,"ip":-2,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[100,50,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.069,"y":0.995},"s":[100,100,100],"t":30},{"o":{"x":0.333,"y":0},"i":{"x":0.833,"y":1},"s":[80,80,100],"t":44},{"o":{"x":0.167,"y":0},"i":{"x":0.833,"y":1},"s":[80,80,100],"t":62},{"s":[50,50,100],"t":76}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.182,"y":1},"s":[150,175,0],"t":30,"ti":[0,8.583,0],"to":[0,-8.583,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.182,"y":0.182},"s":[150,123.5,0],"t":44,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.167,"y":0},"i":{"x":0.182,"y":1},"s":[150,123.5,0],"t":62,"ti":[0,6.167,0],"to":[0,-6.167,0]},{"s":[150,86.5,0],"t":76}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":30},{"o":{"x":0.167,"y":0},"i":{"x":0.833,"y":1},"s":[60],"t":44},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[60],"t":62},{"s":[0],"t":76}],"ix":11}},"ef":[],"w":200,"h":100,"refId":"comp_0","ind":4},{"ty":0,"nm":"Comp 1","sr":1,"st":-33,"op":57,"ip":-33,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[100,50,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.069,"y":0.995},"s":[100,100,100],"t":-1},{"o":{"x":0.333,"y":0},"i":{"x":0.833,"y":1},"s":[80,80,100],"t":13},{"o":{"x":0.167,"y":0},"i":{"x":0.833,"y":1},"s":[80,80,100],"t":31},{"s":[50,50,100],"t":45}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.182,"y":1},"s":[0,25,0],"t":-1,"ti":[0,8.583,0],"to":[0,-8.583,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.182,"y":0.182},"s":[0,-26.5,0],"t":13,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.167,"y":0},"i":{"x":0.182,"y":1},"s":[0,-26.5,0],"t":31,"ti":[0,6.167,0],"to":[0,-6.167,0]},{"s":[0,-63.5,0],"t":45}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":-1},{"o":{"x":0.167,"y":0},"i":{"x":0.833,"y":1},"s":[60],"t":13},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[60],"t":31},{"s":[0],"t":45}],"ix":11}},"ef":[],"w":200,"h":100,"refId":"comp_0","ind":5,"parent":1},{"ty":0,"nm":"Comp 1","sr":1,"st":-76,"op":14,"ip":-76,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[100,50,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.069,"y":0.995},"s":[100,100,100],"t":-35},{"o":{"x":0.333,"y":0},"i":{"x":0.833,"y":1},"s":[80,80,100],"t":-21},{"o":{"x":0.167,"y":0},"i":{"x":0.833,"y":1},"s":[80,80,100],"t":-1},{"s":[50,50,100],"t":13}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.182,"y":1},"s":[150,175,0],"t":-35,"ti":[0,8.583,0],"to":[0,-8.583,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.182,"y":0.182},"s":[150,123.5,0],"t":-21,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.167,"y":0},"i":{"x":0.182,"y":1},"s":[150,123.5,0],"t":-1,"ti":[0,6.167,0],"to":[0,-6.167,0]},{"s":[150,86.5,0],"t":13}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":-35},{"o":{"x":0.167,"y":0},"i":{"x":0.833,"y":1},"s":[60],"t":-21},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[60],"t":-1},{"s":[0],"t":13}],"ix":11}},"ef":[],"w":200,"h":100,"refId":"comp_0","ind":6}],"v":"4.8.0","fr":30,"op":94,"ip":30,"assets":[{"nm":"","id":"comp_0","layers":[{"ty":4,"nm":"Shape Layer 3","sr":1,"st":0,"op":118,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-30,-6.544,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.651,"y":0.998},"s":[0,75.476,100],"t":9},{"o":{"x":0.379,"y":0.013},"i":{"x":0.524,"y":0.97},"s":[110,75.476,100],"t":21},{"s":[100,75.476,100],"t":29}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[81,59.26,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":2,"it":[{"ty":"rc","bm":0,"hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":2,"ix":4},"s":{"a":0,"k":[85.26,14.271],"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.8784,0.9059,0.9373],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[12.63,-8.364],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":1},{"ty":4,"nm":"Shape Layer 2","sr":1,"st":0,"op":166,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-30,-6.544,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.651,"y":0.997},"s":[0,75.476,100],"t":3},{"o":{"x":0.379,"y":0.027},"i":{"x":0.524,"y":0.94},"s":[90,75.476,100],"t":15},{"s":[85,75.476,100],"t":23}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[81,41.26,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":2,"it":[{"ty":"rc","bm":0,"hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":2,"ix":4},"s":{"a":0,"k":[85.26,14.271],"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.8784,0.9059,0.9373],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[12.63,-8.364],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":2},{"ty":4,"nm":"Shape Layer 1","sr":1,"st":0,"op":166,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-66.789,-32.789,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.044,"y":0.991},"s":[0,0,100],"t":0},{"s":[93,93,100],"t":12}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[48.961,49.211,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":2,"it":[{"ty":"rc","bm":0,"hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":4,"ix":4},"s":{"a":0,"k":[38.422,38.422],"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[1,0.8941,0],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-66.789,-32.789],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":3}]}]}

package.json

@@ -84,6 +84,7 @@
         "electron-log": "^4.4.8",
         "electron-settings": "^4.0.3",
         "electron-updater": "^6.1.4",
+        "lottie-react": "^2.4.0",
         "react": "^18.2.0",
         "react-country-flag": "^3.1.0",
         "react-dom": "^18.2.0",

src/renderer/pages/Settings.tsx

@@ -6,6 +6,8 @@ import PortModal from '../components/Modal/Port';
 import LicenseModal from '../components/Modal/License';
 import { settings } from '../lib/settings';
 import { defaultSettings } from '../../defaultSettings';
+import Lottie from "lottie-react";
+import LottieFile from "../../../assets/json/1713988096625.json";
 
 export default function Settings() {
 
@@ -59,8 +61,8 @@ export default function Settings() {
     )
         return <>
             <div className='settings'>
-                <div className='loading'>
-                    <div className='spinner' />
+                <div className='lottie'>
+                    <Lottie animationData={LottieFile} loop={true} />
                 </div>
             </div>
         </>;