Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2025-12-24 18:50:56 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

refactor(ImageBlock): enhance loading state presentation and improve … (#7160)

Browse Source 
* refactor(ImageBlock): enhance loading state presentation and improve layout responsiveness

- Wrapped the loading spinner in a new SpinnerWrapper for better alignment and presentation during streaming and processing states.
- Updated the ImageBlockGroup to use `repeat(auto-fit, minmax(...))` for more flexible grid layout, improving responsiveness across different screen sizes.

These changes enhance the user experience by providing a clearer loading indication and a more adaptable layout for image blocks.

* style(ImageBlockGroup): comment out child styling for future adjustments

- Commented out the child styling rules in ImageBlockGroup to allow for potential layout modifications without removing the code entirely.
- This change prepares the component for further enhancements while maintaining existing functionality.

* refactor(ImageBlock): replace loading spinner with Ant Design Skeleton component

- Updated the loading state presentation in ImageBlock by replacing the custom spinner with Ant Design's Skeleton component for a more consistent UI experience.
- Removed the SpinnerWrapper and simplified the return statement for better readability.
- This change enhances the visual feedback during image loading while maintaining the component's functionality.

---------

Co-authored-by: lizhixuan <zhixuan.li@banosuperapp.com>
This commit is contained in:
MyPrototypeWhat 2025-06-13 17:55:40 +08:00 committed by GitHub
parent 710e743eba
commit 66e577075f
2 changed files with 7 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/renderer/src/pages/home/Messages/Blocks/ImageBlock.tsx
View File

@ -1,6 +1,6 @@
import SvgSpinners180Ring from '@renderer/components/Icons/SvgSpinners180Ring'
import ImageViewer from '@renderer/components/ImageViewer'
import { type ImageMessageBlock, MessageBlockStatus } from '@renderer/types/newMessage'
import { Skeleton } from 'antd'
import React from 'react'
import styled from 'styled-components'
@ -10,7 +10,7 @@ interface Props {
const ImageBlock: React.FC<Props> = ({ block }) => {
if (block.status === MessageBlockStatus.STREAMING || block.status === MessageBlockStatus.PROCESSING)
return <SvgSpinners180Ring />
return <Skeleton.Image active style={{ width: 200, height: 200 }} />
if (block.status === MessageBlockStatus.SUCCESS) {
const images = block.metadata?.generateImageResponse?.images?.length
? block.metadata?.generateImageResponse?.images
@ -28,9 +28,7 @@ const ImageBlock: React.FC<Props> = ({ block }) => {
))}
</Container>
)
} else {
return <></>
}
} else return null
}
const Container = styled.div`
display: flex;
@ -38,5 +36,4 @@ const Container = styled.div`
gap: 10px;
margin-top: 8px;
`
export default React.memo(ImageBlock)

9
src/renderer/src/pages/home/Messages/Blocks/index.tsx
View File

@ -164,15 +164,14 @@ export default React.memo(MessageBlockRenderer)
const ImageBlockGroup = styled.div`
display: grid;
grid-template-columns: repeat(3, minmax(200px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 8px;
width: 100%;
max-width: 960px;
> * {
/* > * {
min-width: 200px;
}
} */
@media (min-width: 1536px) {
grid-template-columns: repeat(4, minmax(250px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
max-width: 1280px;
> * {
min-width: 250px;