优化加载台和错误

tone-page-web/app/(with-header-footer)/blog/[id]/page.tsx

@@ -11,6 +11,7 @@ import 'highlight.js/styles/github.css'
 import { PhotoProvider, PhotoView } from 'react-photo-view';
 import 'react-photo-view/dist/react-photo-view.css';
 import rehypeRaw from 'rehype-raw'
+import { Skeleton } from "@/components/ui/skeleton";
 
 export default function Blog() {
     const params = useParams();
@@ -30,8 +31,19 @@ export default function Blog() {
 
     return (
         <div className="w-full overflow-x-hidden">
-            {data && (
             <div className="max-w-200 mx-auto px-5 overflow-x-hidden mb-10">
+                {error && <div className="my-20 text-center text-zinc-600">{error.message}</div>}
+                {isLoading && (
+                    <div className="flex flex-col gap-2 mt-10">
+                        <Skeleton className="w-full h-10" />
+                        <Skeleton className="w-full h-20" />
+                        <Skeleton className="w-full h-10" />
+                        <Skeleton className="w-full h-20" />
+                        <Skeleton className="w-full h-30" />
+                    </div>
+                )}
+                {data && (
+                    <>
                         <h1 className="text-center text-3xl font-bold mt-10">{data.title}</h1>
                         <p className="text-sm text-zinc-500 text-center my-5">发布于：{new Date(data.createdAt).toLocaleString()}</p>
                         <ReactMarkdown
@@ -59,8 +71,9 @@ export default function Blog() {
                                 blockquote: ({ node, ...props }) => <blockquote className="pl-3 border-l-5" {...props} />,
                             }}
                         />
-                </div>
+                    </>
                 )}
             </div>
+        </div>
     )
 }