15308555518/ frontend
1
0
Fork 0
mirror of https://github.com/cloudreve/frontend.git synced 2025-12-25 19:52:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf(setting): add debounce prop for logo setting preview loading optimization (#297)

This commit is contained in:
Darren Yu 2025-08-21 09:55:38 +08:00 committed by GitHub
parent a612a8e16e
commit f0ad9ff896
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/component/Admin/Settings/SiteInformation/GeneralImagePreview.tsx
View File

@ -1,18 +1,29 @@
import { Box } from "@mui/material";
import React from "react";
import { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import useMediaQuery from "@mui/material/useMediaQuery";
import { useTheme } from "@mui/material/styles";
export interface GeneralImagePreviewProps {
src: string;
debounce?: number; // (可选) 防抖时间
}
const GeneralImagePreview = ({ src }: GeneralImagePreviewProps) => {
const GeneralImagePreview = ({ src, debounce = 0 }: GeneralImagePreviewProps) => {
const { t } = useTranslation("dashboard");
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
const [debouncedSrc, setDebouncedSrc] = useState(src);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedSrc(src);
}, debounce);
return () => clearTimeout(handler);
}, [src, debounce]);
return (
<Box sx={{ mt: isMobile ? 0 : 3 }}>
<Box
@ -25,7 +36,7 @@ const GeneralImagePreview = ({ src }: GeneralImagePreviewProps) => {
>
<Box
component={"img"}
src={src}
src={debouncedSrc}
sx={{
display: "block",
maxWidth: "100%",

12
src/component/Admin/Settings/SiteInformation/SiteInformation.tsx
View File

@ -144,7 +144,9 @@ const SiteInformation = () => {
spacing={3}
secondary={
<Grid item md={7} xs={12}>
<GeneralImagePreview src={values.pwa_small_icon} />
<Box sx={{ maxWidth: 160 }}>
<GeneralImagePreview src={values.pwa_small_icon} debounce={250} />
</Box>
</Grid>
}
>
@ -164,7 +166,9 @@ const SiteInformation = () => {
spacing={3}
secondary={
<Grid item md={7} xs={12}>
<GeneralImagePreview src={values.pwa_medium_icon} />
<Box sx={{ maxWidth: 160 }}>
<GeneralImagePreview src={values.pwa_medium_icon} debounce={250} />
</Box>
</Grid>
}
>
@ -184,7 +188,9 @@ const SiteInformation = () => {
spacing={3}
secondary={
<Grid item md={7} xs={12}>
<GeneralImagePreview src={values.pwa_large_icon} />
<Box sx={{ maxWidth: 160 }}>
<GeneralImagePreview src={values.pwa_large_icon} debounce={250} />
</Box>
</Grid>
}
>