From 72c5de3b811093359293af83c3f40d1eee0b11eb Mon Sep 17 00:00:00 2001
From: fullex <0xfullex@gmail.com>
Date: Mon, 31 Mar 2025 15:01:41 +0800
Subject: [PATCH] optimize: reduce animation gpu load of sidebar minapp

---
 src/renderer/src/components/app/Sidebar.tsx | 23 ++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/components/app/Sidebar.tsx b/src/renderer/src/components/app/Sidebar.tsx
index 08542156..47498d1a 100644
--- a/src/renderer/src/components/app/Sidebar.tsx
+++ b/src/renderer/src/components/app/Sidebar.tsx
@@ -361,6 +361,7 @@ const Icon = styled.div<{ theme: string }>`
   justify-content: center;
   align-items: center;
   border-radius: 50%;
+  box-sizing: border-box;
   -webkit-app-region: none;
   border: 0.5px solid transparent;
   .iconfont,
@@ -392,18 +393,34 @@ const Icon = styled.div<{ theme: string }>`
 
   @keyframes borderBreath {
     0% {
-      border-color: var(--color-primary-mute);
+      opacity: 0.1;
     }
     50% {
-      border-color: var(--color-primary);
+      opacity: 1;
     }
     100% {
-      border-color: var(--color-primary-mute);
+      opacity: 0.1;
     }
   }
 
   &.opened-animation {
+    position: relative;
+  }
+
+  &.opened-animation::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    border-radius: inherit;
+    opacity: 0;
+    will-change: opacity;
     border: 0.5px solid var(--color-primary);
+    /* NOTICE: although we have optimized for the performance, 
+     * the infinite animation will still consume a little GPU resources,
+     * it's a trade-off balance between performance and animation smoothness*/
     animation: borderBreath 4s ease-in-out infinite;
   }
 `