feat: add skeleton on Domain Finder page

assets/pages/search/DomainSearchPage.tsx

@@ -11,6 +11,7 @@ import {
     Input,
     List,
     message,
+    Skeleton,
     Space,
     Tag,
     Timeline,
@@ -21,6 +22,7 @@ import {
     ClockCircleOutlined,
     DeleteOutlined,
     IdcardOutlined,
+    ReloadOutlined,
     SearchOutlined,
     ShareAltOutlined,
     SignatureOutlined,
@@ -40,16 +42,17 @@ type FieldType = {
 
 export default function DomainSearchPage() {
 
-    const [domain, setDomain] = useState<Domain | null>(null)
+    const [domain, setDomain] = useState<Domain | null>()
     const [messageApi, contextHolder] = message.useMessage()
 
     const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
+        setDomain(null)
         getDomain(values.ldhName).then(d => {
             setDomain(d)
             messageApi.success('Found !')
         }).catch((e: AxiosError) => {
             const data = e?.response?.data as { detail: string }
-            setDomain(null)
+            setDomain(undefined)
             messageApi.error(data.detail ?? 'An error occurred')
         })
     }
@@ -77,10 +80,12 @@ export default function DomainSearchPage() {
                         min: 2
                     }]}
                 >
-                    <Input size="large" prefix={<SearchOutlined/>} placeholder="example.com"/>
+                    <Input size="large" prefix={<SearchOutlined/>} placeholder="example.com" autoFocus={true}
+                           autoComplete='off'/>
                 </Form.Item>
             </Form>
 
+            <Skeleton loading={domain === null} active>
                 {
                     domain &&
                     (!domain.deleted ? <Space direction="vertical" size="middle" style={{width: '100%'}}>
@@ -128,7 +133,11 @@ export default function DomainSearchPage() {
                                                     } else if (action === 'deletion') {
                                                         color = 'red'
                                                         dot = <DeleteOutlined style={{fontSize: '16px'}}/>
+                                                    } else if (action === 'reregistration') {
+                                                        color = 'green'
+                                                        dot = <ReloadOutlined style={{fontSize: '16px'}}/>
                                                     }
+
                                                     return {
                                                         label: new Date(date).toUTCString(),
                                                         children: action,
@@ -184,6 +193,7 @@ export default function DomainSearchPage() {
                                 </Typography.Text>
                             }/>)
                 }
+            </Skeleton>
         </Card>
     </Flex>
 }

assets/pages/watchdog/UserPage.tsx

@@ -1,7 +1,25 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
+import {Card, Flex, Skeleton, Typography} from "antd";
+import {getUser, User} from "../../utils/api";
 
 export default function UserPage() {
-    return <p>
-        My Account Page
-    </p>
+
+    const [user, setUser] = useState<User | null>(null)
+
+    useEffect(() => {
+        getUser().then(setUser)
+    }, [])
+
+    return <Skeleton loading={user === null} active>
+        <Flex gap="middle" align="center" justify="center" vertical>
+            <Card title="My Account">
+                <Typography.Paragraph>
+                    Username : {user?.email}
+                </Typography.Paragraph>
+                <Typography.Paragraph>
+                    Roles : {user?.roles.join(',')}
+                </Typography.Paragraph>
+            </Card>
+        </Flex>
+    </Skeleton>
 }