feat(ux): rotating icon when reset rotate back

Signed-off-by: Innei <i@innei.in>
RSSNext · Sep 19, 2024 · 13105ee · 13105ee
1 parent 1a1d8ab
commit 13105ee
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/apps/renderer/src/components/ui/loading.tsx b/apps/renderer/src/components/ui/loading.tsx
@@ -1,4 +1,5 @@
-import React, { cloneElement } from "react"
+import { m, useAnimation } from "framer-motion"
+import React, { cloneElement, useEffect } from "react"
 
 import { cn } from "~/lib/utils"
 
@@ -112,3 +113,28 @@ export const LoadingWithIcon: Component<
     )
   }
 }
+
+export const RotatingRefreshIcon: React.FC<{
+  isRefreshing: boolean
+  className?: string
+}> = ({ isRefreshing, className }) => {
+  const controls = useAnimation()
+
+  useEffect(() => {
+    if (isRefreshing) {
+      controls.set({ rotate: 0 })
+      controls.start({
+        rotate: 360,
+        transition: { duration: 1, repeat: Infinity, ease: "linear" },
+      })
+    } else {
+      controls.stop()
+      controls.start({
+        rotate: 360,
+        transition: { ease: "linear", type: "spring" },
+      })
+    }
+  }, [isRefreshing, controls])
+
+  return <m.i className={cn("i-mgc-refresh-2-cute-re", className)} animate={controls} />
+}
diff --git a/apps/renderer/src/modules/entry-column/layouts/EntryListHeader.tsx b/apps/renderer/src/modules/entry-column/layouts/EntryListHeader.tsx
@@ -8,6 +8,7 @@ import { useWhoami } from "~/atoms/user"
 import { ImpressionView } from "~/components/common/ImpressionTracker"
 import { ActionButton } from "~/components/ui/button"
 import { DividerVertical } from "~/components/ui/divider"
+import { RotatingRefreshIcon } from "~/components/ui/loading"
 import { EllipsisHorizontalTextWithTooltip } from "~/components/ui/typography"
 import { FEED_COLLECTION_LIST, ROUTE_ENTRY_PENDING, views } from "~/constants"
 import { shortcuts } from "~/constants/shortcuts"
@@ -109,7 +110,7 @@ export const EntryListHeader: FC<{
                   refreshFeed()
                 }}
               >
-                <i className={cn("i-mgc-refresh-2-cute-re", isPending && "animate-spin")} />
+                <RotatingRefreshIcon isRefreshing={isPending} />
               </ActionButton>
             ) : (
               <ActionButton
@@ -122,12 +123,9 @@ export const EntryListHeader: FC<{
                   refetch()
                 }}
               >
-                <i
-                  className={cn(
-                    "i-mgc-refresh-2-cute-re",
-                    isRefreshing && "animate-spin",
-                    hasUpdate && "text-accent",
-                  )}
+                <RotatingRefreshIcon
+                  className={cn(hasUpdate && "text-accent")}
+                  isRefreshing={isRefreshing}
                 />
               </ActionButton>
             )