Merge branch 'fix/create-clone-poller-leak' into 'master'

Sarumyan · Sarumyan · commit f8e6e7c85b87 · 2026-07-14T11:13:50.000Z
fix(ui): stop clone status polling on page unmount

Closes #743

See merge request postgres-ai/database-lab!1172
diff --git a/ui/packages/ce/src/test/clonePoller.test.ts b/ui/packages/ce/src/test/clonePoller.test.ts
@@ -0,0 +1,101 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+
+import {
+  ClonePoller,
+  UNSTABLE_CLONE_UPDATE_TIMEOUT,
+} from '@postgres.ai/shared/utils/clonePoller'
+
+describe('ClonePoller', () => {
+  beforeEach(() => vi.useFakeTimers())
+  afterEach(() => vi.useRealTimers())
+
+  it('is running by default', () => {
+    expect(new ClonePoller().isStopped).toBe(false)
+  })
+
+  it('runs the scheduled tick after the default interval', () => {
+    const poller = new ClonePoller()
+    const tick = vi.fn()
+
+    poller.scheduleNext(tick)
+    vi.advanceTimersByTime(UNSTABLE_CLONE_UPDATE_TIMEOUT - 1)
+    expect(tick).not.toHaveBeenCalled()
+
+    vi.advanceTimersByTime(1)
+    expect(tick).toHaveBeenCalledTimes(1)
+  })
+
+  it('honors a custom interval', () => {
+    const poller = new ClonePoller(50)
+    const tick = vi.fn()
+
+    poller.scheduleNext(tick)
+    vi.advanceTimersByTime(50)
+    expect(tick).toHaveBeenCalledTimes(1)
+  })
+
+  it('keeps only the latest pending tick', () => {
+    const poller = new ClonePoller(100)
+    const first = vi.fn()
+    const second = vi.fn()
+
+    poller.scheduleNext(first)
+    poller.scheduleNext(second)
+    vi.advanceTimersByTime(100)
+
+    expect(first).not.toHaveBeenCalled()
+    expect(second).toHaveBeenCalledTimes(1)
+  })
+
+  it('stop() cancels a pending tick and marks the poller stopped', () => {
+    const poller = new ClonePoller(100)
+    const tick = vi.fn()
+
+    poller.scheduleNext(tick)
+    poller.stop()
+    vi.advanceTimersByTime(100)
+
+    expect(tick).not.toHaveBeenCalled()
+    expect(poller.isStopped).toBe(true)
+  })
+
+  it('scheduleNext() is a no-op once stopped', () => {
+    const poller = new ClonePoller(100)
+    const tick = vi.fn()
+
+    poller.stop()
+    poller.scheduleNext(tick)
+    vi.advanceTimersByTime(100)
+
+    expect(tick).not.toHaveBeenCalled()
+  })
+
+  it('start() re-arms a stopped poller', () => {
+    const poller = new ClonePoller(100)
+    const tick = vi.fn()
+
+    poller.stop()
+    poller.start()
+    expect(poller.isStopped).toBe(false)
+
+    poller.scheduleNext(tick)
+    vi.advanceTimersByTime(100)
+    expect(tick).toHaveBeenCalledTimes(1)
+  })
+
+  it('cancel() drops the pending tick but keeps scheduling enabled', () => {
+    const poller = new ClonePoller(100)
+    const dropped = vi.fn()
+    const next = vi.fn()
+
+    poller.scheduleNext(dropped)
+    poller.cancel()
+    vi.advanceTimersByTime(100)
+    expect(dropped).not.toHaveBeenCalled()
+    expect(poller.isStopped).toBe(false)
+
+    poller.scheduleNext(next)
+    vi.advanceTimersByTime(100)
+    expect(next).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/ui/packages/shared/pages/Clone/index.tsx b/ui/packages/shared/pages/Clone/index.tsx
@@ -205,6 +205,9 @@ export const Clone = observer((props: Props) => {
     stores.main.load(props.instanceId, props.cloneId)
   }, [])
 
+  // Stop clone status polling on unmount.
+  useEffect(() => () => stores.main.stopPolling(), [])
+
   const {
     instance,
     snapshots,
diff --git a/ui/packages/shared/pages/Clone/stores/Main.ts b/ui/packages/shared/pages/Clone/stores/Main.ts
@@ -19,11 +19,10 @@ import {
 import { Clone } from '@postgres.ai/shared/types/api/entities/clone'
 import { Instance } from '@postgres.ai/shared/types/api/entities/instance'
 import { checkIsCloneStable } from '@postgres.ai/shared/utils/clone'
+import { ClonePoller } from '@postgres.ai/shared/utils/clonePoller'
 import { getTextFromUnknownApiError } from '@postgres.ai/shared/utils/api'
 import { InitWS } from '@postgres.ai/shared/types/api/endpoints/initWS'
 
-const UNSTABLE_CLONE_UPDATE_TIMEOUT = 1000
-
 export type Api = SnapshotsApi & {
   getInstance: GetInstance
   getClone: GetClone
@@ -58,7 +57,7 @@ export class MainStore {
 
   isReloading = false
 
-  private cloneUpdateTimeout?: number
+  private readonly poller = new ClonePoller()
 
   private readonly api: Api
 
@@ -75,6 +74,8 @@ export class MainStore {
   }
 
   load = async (instanceId: string, cloneId: string) => {
+    this.poller.start()
+
     const [isInstanceOk, isCloneOk, isSnapshotsLoaded] = await Promise.all([
       this.loadInstance(instanceId),
       this.loadClone(instanceId, cloneId),
@@ -92,6 +93,8 @@ export class MainStore {
     return isSuccess
   }
 
+  stopPolling = () => this.poller.stop()
+
   private loadInstance = async (instanceId: string) => {
     const { response, error } = await this.api.getInstance({
       instanceId,
@@ -116,18 +119,17 @@ export class MainStore {
   }
 
   private loadClone = async (instanceId: string, cloneId: string) => {
-    window.clearTimeout(this.cloneUpdateTimeout)
+    if (this.poller.isStopped) return false
+
+    this.poller.cancel()
 
     const { response, error } = await this.api.getClone({ instanceId, cloneId })
 
     if (response) {
       this.clone = response
 
       if (!this.isCloneStable)
-        this.cloneUpdateTimeout = window.setTimeout(
-          () => this.loadClone(instanceId, cloneId),
-          UNSTABLE_CLONE_UPDATE_TIMEOUT,
-        )
+        this.poller.scheduleNext(() => this.loadClone(instanceId, cloneId))
     }
 
     if (error) {
diff --git a/ui/packages/shared/pages/CreateClone/index.tsx b/ui/packages/shared/pages/CreateClone/index.tsx
@@ -166,6 +166,9 @@ export const CreateClone = observer((props: Props) => {
     history.push(props.routes.clone(stores.main.clone.id))
   }, [stores.main.clone, stores.main.isCloneStable])
 
+  // Stop clone status polling on unmount.
+  useEffect(() => () => stores.main.stopPolling(), [])
+
   const headRendered = (
     <>
       {/* //TODO: make global reset styles. */}
diff --git a/ui/packages/shared/pages/CreateClone/stores/Main.ts b/ui/packages/shared/pages/CreateClone/stores/Main.ts
@@ -13,12 +13,11 @@ import {
 } from '@postgres.ai/shared/stores/Snapshots'
 import { getTextFromUnknownApiError } from '@postgres.ai/shared/utils/api'
 import { checkIsCloneStable } from '@postgres.ai/shared/utils/clone'
+import { ClonePoller } from '@postgres.ai/shared/utils/clonePoller'
 
 import { FormValues } from '../useForm'
 import { InitWS } from '@postgres.ai/shared/types/api/endpoints/initWS'
 
-const UNSTABLE_CLONE_UPDATE_TIMEOUT = 1000
-
 export type MainStoreApi = SnapshotsApi & {
   getInstance: GetInstance
   createClone: CreateClone
@@ -37,7 +36,7 @@ export class MainStore {
   clone: Clone | null = null
   cloneError: string | null = null
 
-  private cloneUpdateTimeout?: number
+  private readonly poller = new ClonePoller()
 
   private readonly api: MainStoreApi
 
@@ -73,6 +72,8 @@ export class MainStore {
   createClone = async (data: FormValues) => {
     if (!this.instance) return false
 
+    this.poller.start()
+
     const { response, error } = await this.api.createClone({
       ...data,
       instanceId: this.instance.id,
@@ -115,22 +116,23 @@ export class MainStore {
     return response
   }
 
+  stopPolling = () => this.poller.stop()
+
   private updateCloneUntilStable = async (args: {
     instanceId: string
     cloneId: string
   }) => {
-    window.clearTimeout(this.cloneUpdateTimeout)
+    if (this.poller.isStopped) return
+
+    this.poller.cancel()
 
     const { response, error } = await this.api.getClone(args)
 
     if (response) {
       this.clone = response
 
       if (!this.isCloneStable)
-        this.cloneUpdateTimeout = window.setTimeout(
-          () => this.updateCloneUntilStable(args),
-          UNSTABLE_CLONE_UPDATE_TIMEOUT,
-        )
+        this.poller.scheduleNext(() => this.updateCloneUntilStable(args))
     }
 
     if (error)
diff --git a/ui/packages/shared/utils/clonePoller.ts b/ui/packages/shared/utils/clonePoller.ts
@@ -0,0 +1,47 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+
+// interval between clone status polls while a clone is still unstable.
+export const UNSTABLE_CLONE_UPDATE_TIMEOUT = 1000
+
+// ClonePoller owns a single self-rescheduling timeout used to poll clone status
+// until it becomes stable. It is reusable: start() re-arms a poller that was
+// previously stopped, and stop() cancels any pending tick and blocks further
+// scheduling — including a tick that an in-flight request is about to queue.
+export class ClonePoller {
+  private timeout?: ReturnType<typeof setTimeout>
+  private stopped = false
+
+  constructor(private readonly intervalMs: number = UNSTABLE_CLONE_UPDATE_TIMEOUT) {}
+
+  get isStopped() {
+    return this.stopped
+  }
+
+  // start re-arms the poller so a reused store polls again.
+  start = () => {
+    this.stopped = false
+  }
+
+  // stop halts polling and cancels any pending tick.
+  stop = () => {
+    this.stopped = true
+    clearTimeout(this.timeout)
+  }
+
+  // cancel drops a pending tick without blocking future scheduling.
+  cancel = () => {
+    clearTimeout(this.timeout)
+  }
+
+  // scheduleNext queues the next tick, unless the poller has been stopped.
+  scheduleNext = (tick: () => void) => {
+    clearTimeout(this.timeout)
+    if (this.stopped) return
+    this.timeout = setTimeout(tick, this.intervalMs)
+  }
+}
