From 66e577075f87d1141722d0ae7c3babdf7fd68340 Mon Sep 17 00:00:00 2001
From: MyPrototypeWhat <43230886+MyPrototypeWhat@users.noreply.github.com>
Date: Fri, 13 Jun 2025 17:55:40 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ImageBlock):=20enhance=20loading=20sta?=
 =?UTF-8?q?te=20presentation=20and=20improve=20=E2=80=A6=20(#7160)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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>
---
 .../src/pages/home/Messages/Blocks/ImageBlock.tsx        | 9 +++------
 src/renderer/src/pages/home/Messages/Blocks/index.tsx    | 9 ++++-----
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/renderer/src/pages/home/Messages/Blocks/ImageBlock.tsx b/src/renderer/src/pages/home/Messages/Blocks/ImageBlock.tsx
index 5229b12304..8cecea1ad8 100644
--- a/src/renderer/src/pages/home/Messages/Blocks/ImageBlock.tsx
+++ b/src/renderer/src/pages/home/Messages/Blocks/ImageBlock.tsx
@@ -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)
diff --git a/src/renderer/src/pages/home/Messages/Blocks/index.tsx b/src/renderer/src/pages/home/Messages/Blocks/index.tsx
index 7949356b25..b469f03264 100644
--- a/src/renderer/src/pages/home/Messages/Blocks/index.tsx
+++ b/src/renderer/src/pages/home/Messages/Blocks/index.tsx
@@ -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;