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

* 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/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 {
+  } else return null
-    return <></>
-  }
 }
 const Container = styled.div`
   display: flex;
@@ -38,5 +36,4 @@ const Container = styled.div`
   gap: 10px;
   margin-top: 8px;
 `
-
 export default React.memo(ImageBlock)

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;