fix(style): cluster state do not display

src/pages/backends/components/backend-card.tsx

@@ -227,7 +227,7 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
               color="geekblue"
               className="font-400"
               bordered={false}
-              style={{ borderRadius: 'var(--ant-border-radius)' }}
+              style={{ borderRadius: 'var(--ant-border-radius)', margin: 0 }}
             >
               {intl.formatMessage({ id: 'backend.builtin' })}
             </Tag>

src/pages/backends/components/backend-list.tsx

@@ -24,6 +24,20 @@ const SpinWrapper = styled.div`
   }
 `;
 
+const SkeletonWrapper = styled.div`
+  .ant-skeleton-content {
+    .ant-skeleton-paragraph {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      margin-bottom: 0;
+      li {
+        margin-top: 0 !important;
+      }
+    }
+  }
+`;
+
 interface BackendListProps {
   defaultSpan?: number;
   resizable?: boolean;
@@ -34,12 +48,6 @@ interface BackendListProps {
   onSelect?: (item: any) => void;
 }
 
-const InnerSkeleton: React.FC<{
-  span: number;
-}> = (props) => {
-  return <CardSkeleton {...props} />;
-};
-
 const ListSkeleton: React.FC<{
   span: number;
   loading: boolean;
@@ -56,7 +64,21 @@ const ListSkeleton: React.FC<{
             }}
             wrapperClassName="skelton-wrapper"
           >
-            {isFirst && <InnerSkeleton span={span}></InnerSkeleton>}
+            {isFirst && (
+              <SkeletonWrapper>
+                <CardSkeleton
+                  span={span}
+                  skeletonProps={{
+                    title: false
+                  }}
+                  skeletonStyle={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 26
+                  }}
+                ></CardSkeleton>
+              </SkeletonWrapper>
+            )}
           </Spin>
         </SpinWrapper>
       )}