perf : cache

components/comments/comment-skeleton.tsx

@@ -1,9 +1,13 @@
+"use client";
+
+import { useCommentLocale } from "./comment-locale";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
 
 export function AdminCommentRowsSkeleton({ count = 3 }: { count?: number }) {
-  return <div role="status" aria-label="กำลังโหลดความคิดเห็น" className="flex min-w-0 flex-col">
-    <span className="sr-only">กำลังโหลดความคิดเห็น…</span>
+  const { t } = useCommentLocale();
+  return <div role="status" aria-label={t("กำลังโหลดความคิดเห็น", "Loading comments")} className="flex min-w-0 flex-col">
+    <span className="sr-only">{t("กำลังโหลดความคิดเห็น…", "Loading comments…")}</span>
     <Table className="table-fixed max-md:block" aria-hidden="true">
       <TableBody className="max-md:block">{Array.from({ length: count }, (_, index) => <TableRow key={index} className="max-md:block">
         <TableCell className="px-0 py-5 align-top whitespace-normal max-md:block max-md:pb-3 md:pr-6">
@@ -36,8 +40,9 @@ export function AdminCommentInboxSkeleton() {
 }
 
 export function CommentSkeleton({ count = 3 }: { count?: number }) {
-  return <div role="status" aria-label="กำลังโหลดความคิดเห็น" className="flex flex-col gap-6">
-    <span className="sr-only">กำลังโหลดความคิดเห็น…</span>
+  const { t } = useCommentLocale();
+  return <div role="status" aria-label={t("กำลังโหลดความคิดเห็น", "Loading comments")} className="flex flex-col gap-6">
+    <span className="sr-only">{t("กำลังโหลดความคิดเห็น…", "Loading comments…")}</span>
     <div aria-hidden="true" className="flex flex-col gap-6">{Array.from({ length: count }, (_, index) =>
       <div key={index} className="flex gap-3">
         <Skeleton className="size-10 shrink-0 rounded-full" />