骨架屏

src/views/account/dialog/qrcode.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
 import http from '@src/http';
-import { Modal, Image, message, Input, Button } from "antd";
+import { Modal, Image, message, Input, Button, Skeleton } from "antd";
 import { qwGetQrCode, qwCheckLogin, qwCheckQRCode } from '@src/http/api';
 
 interface QrCodeData {
@@ -258,14 +258,18 @@ const QrCodeModal: React.FC<QrCodeModalProps> = ({
         footer={null}
         destroyOnClose
       >
-        {qrCodeData && (
+        {loading ? (
+          <div className="flex flex-col items-center">
+            <Skeleton.Image active style={{ width: 200, height: 200 }} />
+            <Skeleton active paragraph={{ rows: 1 }} className="mt-4" />
+          </div>
+        ) : qrCodeData && (
           <div className="flex flex-col items-center">
             <Image
               src={qrCodeData.qrcode}
               alt="二维码"
               width={200}
               preview={false}
-              loading={loading ? 'lazy' : undefined}
             />
             <p className="mt-4 text-center">请使用企业微信扫描二维码</p>
             <p className="text-center text-gray-500">