diff --git a/openflare_server/web/components/feedback/inline-message.tsx b/openflare_server/web/components/feedback/inline-message.tsx index 87ad3209..c01bd48f 100644 --- a/openflare_server/web/components/feedback/inline-message.tsx +++ b/openflare_server/web/components/feedback/inline-message.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useEffect } from 'react'; +import { useEffect, useRef } from 'react'; import { toast } from 'sonner'; import { cn } from '@/lib/utils/cn'; @@ -27,9 +27,15 @@ export function InlineMessage({ className, onClear, }: InlineMessageProps) { + const onClearRef = useRef(onClear); + + useEffect(() => { + onClearRef.current = onClear; + }, [onClear]); + useEffect(() => { // Only trigger toast if onClear is provided (dynamic feedback) - if (!onClear || !message) return; + if (!onClearRef.current || !message) return; const options = { position: 'bottom-right' as const, @@ -44,10 +50,10 @@ export function InlineMessage({ } const timer = setTimeout(() => { - onClear(); + onClearRef.current?.(); }, 0); return () => clearTimeout(timer); - }, [tone, message, onClear]); + }, [tone, message]); // If onClear is provided, this is a toast feedback notice, so render nothing inline if (onClear) { diff --git a/openflare_server/web/features/tunnels/components/tunnels-page.tsx b/openflare_server/web/features/tunnels/components/tunnels-page.tsx index e07a1df3..aaf585f8 100644 --- a/openflare_server/web/features/tunnels/components/tunnels-page.tsx +++ b/openflare_server/web/features/tunnels/components/tunnels-page.tsx @@ -2,7 +2,6 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import { useMemo, useState } from 'react'; -import Link from 'next/link'; import { EmptyState } from '@/components/feedback/empty-state'; import { ErrorState } from '@/components/feedback/error-state';