feat(ui): new WorkflowDetail using antd

ui/src/components/notification/NotifyChannels.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import { useDeepCompareMemo } from "@ant-design/pro-components";
 import { Button, Collapse, message, notification, Skeleton, Space, Switch, type CollapseProps } from "antd";
 
+import Show from "@/components/Show";
 import NotifyChannelEditForm, { type NotifyChannelEditFormInstance } from "./NotifyChannelEditForm";
 import NotifyTestButton from "./NotifyTestButton";
 import { notifyChannelsMap } from "@/domain/settings";
@@ -105,11 +106,9 @@ const NotifyChannels = ({ className, classNames, style, styles }: NotifyChannels
 
   return (
     <div className={className} style={style}>
-      {!loadedAtOnce ? (
-        <Skeleton active />
-      ) : (
+      <Show when={loadedAtOnce} fallback={<Skeleton active />}>
         <Collapse className={classNames?.collapse} style={styles?.collapse} accordion={true} bordered={false} items={channelCollapseItems} />
-      )}
+      </Show>
     </div>
   );
 };

ui/src/components/notification/NotifyTemplate.tsx

@@ -6,6 +6,7 @@ import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 import { ClientResponseError } from "pocketbase";
 
+import Show from "@/components/Show";
 import { defaultNotifyTemplate, SETTINGS_NAMES, type NotifyTemplatesSettingsContent } from "@/domain/settings";
 import { get as getSettings, save as saveSettings } from "@/repository/settings";
 import { getErrMsg } from "@/utils/error";
@@ -88,9 +89,7 @@ const NotifyTemplateForm = ({ className, style }: NotifyTemplateFormProps) => {
       {MessageContextHolder}
       {NotificationContextHolder}
 
-      {loading ? (
-        <Skeleton active />
-      ) : (
+      <Show when={!loading} fallback={<Skeleton active />}>
         <Form form={form} disabled={formPending} initialValues={initialValues} layout="vertical" onFinish={handleFormFinish}>
           <Form.Item
             name="subject"
@@ -120,7 +119,7 @@ const NotifyTemplateForm = ({ className, style }: NotifyTemplateFormProps) => {
             </Button>
           </Form.Item>
         </Form>
-      )}
+      </Show>
     </div>
   );
 };