feat: enhance canvas and layout components with new features and improvements
- Added remote image patterns to the Next.js configuration for enhanced image handling. - Updated TypeScript configuration to exclude the 'implement' directory. - Refactored layout component to fetch initial authentication token and pass it to Providers. - Replaced CanvasToolbar with CanvasSidebar for improved UI layout and functionality. - Enhanced Canvas component with new drag-and-drop file upload capabilities and batch node movement. - Updated various node components to support new status handling and improved user interactions. - Added debounced saving for note and prompt nodes to optimize performance.
This commit is contained in:
37
hooks/use-debounced-callback.ts
Normal file
37
hooks/use-debounced-callback.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { useRef, useCallback, useEffect } from "react";
|
||||
|
||||
/**
|
||||
* Debounced callback — ruft `callback` erst auf, wenn `delay` ms
|
||||
* ohne erneuten Aufruf vergangen sind. Perfekt für Auto-Save.
|
||||
*/
|
||||
export function useDebouncedCallback<Args extends unknown[]>(
|
||||
callback: (...args: Args) => void,
|
||||
delay: number,
|
||||
): (...args: Args) => void {
|
||||
const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const callbackRef = useRef(callback);
|
||||
|
||||
// Callback-Ref aktuell halten ohne neu zu rendern
|
||||
useEffect(() => {
|
||||
callbackRef.current = callback;
|
||||
}, [callback]);
|
||||
|
||||
// Cleanup bei Unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const debouncedFn = useCallback(
|
||||
(...args: Args) => {
|
||||
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
||||
timeoutRef.current = setTimeout(() => {
|
||||
callbackRef.current(...args);
|
||||
}, delay);
|
||||
},
|
||||
[delay],
|
||||
);
|
||||
|
||||
return debouncedFn;
|
||||
}
|
||||
Reference in New Issue
Block a user