Merge pull request #1604 from Agenta-AI/issue-1597/-Remove-Blue-Icon-…

…when-in-Loading-state

Remove Loading icon in Result component

agenta-web/src/components/Playground/ViewNavigation.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useRef} from "react"
-import {Col, Row, Divider, Button, Tooltip, Spin, notification, Result} from "antd"
+import {Col, Row, Divider, Button, Tooltip, Spin, notification} from "antd"
 import TestView from "./Views/TestView"
 import ParametersView from "./Views/ParametersView"
 import {useVariant} from "@/lib/hooks/useVariant"
@@ -16,6 +16,7 @@ import {
 } from "@/lib/services/api"
 import {useAppsData} from "@/contexts/app.context"
 import {isDemo} from "@/lib/helpers/utils"
+import ResultComponent from "../ResultComponent/ResultComponent"
 
 interface Props {
     variant: Variant
@@ -104,10 +105,10 @@ const ViewNavigation: React.FC<Props> = ({
 
     if (retrying || (!retriedOnce.current && netWorkError)) {
         return (
-            <Result
-                status="info"
+            <ResultComponent
+                status={"info"}
                 title="Waiting for the variant to start"
-                extra={<Spin spinning={retrying} />}
+                spinner={retrying}
             />
         )
     }

agenta-web/src/components/ResultComponent/ResultComponent.tsx

@@ -1,16 +1,41 @@
-import {Result, Spin} from "antd"
-import {ResultStatusType} from "antd/es/result"
-import React from "react"
+import {JSSTheme} from "@/lib/Types"
+import {CloseCircleFilled} from "@ant-design/icons"
+import {Result, Spin, Typography} from "antd"
+import React, {ReactNode} from "react"
+import {createUseStyles} from "react-jss"
+const {Title} = Typography
 
 interface ResultComponentProps {
-    status: ResultStatusType
+    status: ReactNode
     title: string
     subtitle?: string
     spinner?: boolean
 }
 
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    closeCircleIcon: {
+        color: "#ff4d4f",
+    },
+    title: {
+        textTransform: "capitalize",
+    },
+}))
+
 const ResultComponent: React.FC<ResultComponentProps> = ({status, title, subtitle, spinner}) => {
-    return <Result status={status} title={title} subTitle={subtitle} extra={spinner && <Spin />} />
+    const classes = useStyles()
+
+    return (
+        <Result
+            icon={status === "error" && <CloseCircleFilled className={classes.closeCircleIcon} />}
+            title={
+                <Title level={3} className={classes.title}>
+                    {title}
+                </Title>
+            }
+            subTitle={subtitle}
+            extra={spinner && <Spin />}
+        />
+    )
 }
 
 export default ResultComponent