From 5dec7c76d411e45282b09ad9bc5fcbb85aef20c8 Mon Sep 17 00:00:00 2001
From: CodingOnStar <hanxujiang@dify.com>
Date: Mon, 31 Aug 2026 20:08:32 +0800
Subject: [PATCH] fix(web): finish banner loop reset without rAF

Settle the wrapping carousel from resetting to idle with rAF plus a
short timeout fallback so loop clones unmount even when animation frames
are delayed.
---
 oxlint-suppressions.json                          |  5 -----
 .../home-trending-layout.browser.spec.tsx         |  4 +++-
 .../plugins/marketplace/home/home-trending.tsx    | 15 +++++++++++++--
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/oxlint-suppressions.json b/oxlint-suppressions.json
index 4e744a0a88d..5cbcedae409 100644
--- a/oxlint-suppressions.json
+++ b/oxlint-suppressions.json
@@ -2607,11 +2607,6 @@
       "count": 1
     }
   },
-  "web/app/components/plugins/marketplace/utils.ts": {
-    "no-unused-vars": {
-      "count": 1
-    }
-  },
   "web/app/components/plugins/plugin-auth/authorized/index.tsx": {
     "no-restricted-imports": {
       "count": 1
diff --git a/web/app/components/plugins/marketplace/home/__tests__/home-trending-layout.browser.spec.tsx b/web/app/components/plugins/marketplace/home/__tests__/home-trending-layout.browser.spec.tsx
index 5eb8ad0fe24..b9fb2809f9a 100644
--- a/web/app/components/plugins/marketplace/home/__tests__/home-trending-layout.browser.spec.tsx
+++ b/web/app/components/plugins/marketplace/home/__tests__/home-trending-layout.browser.spec.tsx
@@ -261,7 +261,9 @@ describe('Marketplace home trending layout', () => {
     expect(track.style.transform).toContain('-300%')
     expect(track.querySelector('[data-carousel-loop-clone]')).toBeInTheDocument()
 
-    await new Promise((resolve) => setTimeout(resolve, 450))
+    await expect
+      .poll(() => track.getAttribute('data-carousel-loop-phase'), { timeout: 1000 })
+      .toBe('idle')
 
     expect(screen.getByRole('button', { name: 'First banner' }).element()).toHaveAttribute(
       'aria-current',
diff --git a/web/app/components/plugins/marketplace/home/home-trending.tsx b/web/app/components/plugins/marketplace/home/home-trending.tsx
index 43a22129a60..6448631b9f7 100644
--- a/web/app/components/plugins/marketplace/home/home-trending.tsx
+++ b/web/app/components/plugins/marketplace/home/home-trending.tsx
@@ -140,8 +140,19 @@ function HomeTrending({
   useEffect(() => {
     if (loopPhase !== 'resetting') return
 
-    const frame = window.requestAnimationFrame(() => setLoopPhase('idle'))
-    return () => window.cancelAnimationFrame(frame)
+    let settled = false
+    const settle = () => {
+      if (settled) return
+      settled = true
+      setLoopPhase('idle')
+    }
+
+    const frame = window.requestAnimationFrame(settle)
+    const timeout = window.setTimeout(settle, 50)
+    return () => {
+      window.cancelAnimationFrame(frame)
+      window.clearTimeout(timeout)
+    }
   }, [loopPhase])
 
   useEffect(