optimize various components

This commit is contained in:
jeffvli
2025-11-18 13:25:27 -08:00
parent fe60d2e26f
commit c77ba121a6
3 changed files with 64 additions and 28 deletions
@@ -1,4 +1,4 @@
import { ChangeEvent, CSSProperties, KeyboardEvent, useRef, useState } from 'react';
import { ChangeEvent, CSSProperties, KeyboardEvent, useEffect, useRef, useState } from 'react';
import { shallow } from 'zustand/shallow';
import { useSettingsStore } from '/@/renderer/store';
@@ -58,10 +58,24 @@ export const SearchInput = ({
}
};
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
useEffect(() => {
return () => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
};
}, []);
const handleButtonClick = () => {
setIsInputMode(true);
setTimeout(() => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
timeoutRef.current = setTimeout(() => {
ref?.current?.focus();
timeoutRef.current = null;
}, 0);
};
+29 -22
View File
@@ -42,6 +42,7 @@ export const useFastAverageColor = (args: {
});
useEffect(() => {
let isMounted = true;
const fac = new FastAverageColor();
if (src && srcLoaded) {
@@ -56,35 +57,41 @@ export const useFastAverageColor = (args: {
mode: 'speed',
})
.then((color) => {
idRef.current = id;
return setBackground({
background: color.rgb,
isDark: color.isDark,
isLight: color.isLight,
});
if (isMounted) {
idRef.current = id;
setBackground({
background: color.rgb,
isDark: color.isDark,
isLight: color.isLight,
});
setIsLoading(false);
}
})
.catch((e) => {
console.error('Error fetching average color', e);
idRef.current = id;
return setBackground({
background: 'rgba(0, 0, 0, 0)',
isDark: true,
isLight: false,
});
})
.finally(() => {
setIsLoading(false);
if (isMounted) {
console.error('Error fetching average color', e);
idRef.current = id;
setBackground({
background: 'rgba(0, 0, 0, 0)',
isDark: true,
isLight: false,
});
setIsLoading(false);
}
});
} else if (srcLoaded) {
idRef.current = id;
return setBackground({
background: 'var(--theme-colors-foreground-muted)',
isDark: true,
isLight: false,
});
if (isMounted) {
idRef.current = id;
setBackground({
background: 'var(--theme-colors-foreground-muted)',
isDark: true,
isLight: false,
});
}
}
return () => {
isMounted = false;
fac.destroy();
};
}, [algorithm, srcLoaded, src, id]);