feat(web): standardize loading on shared skeleton recipes; retire '…' + empty status divs (#53)

web/src/vocab/vocabulary-list.tsx

@@ -7,6 +7,7 @@ import { DeleteConfirmDialog } from "../components/delete-confirm-dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { ListSkeleton } from "@/components/ui/skeletons";
 
 export function VocabularyList() {
   const { t } = useTranslation();
@@ -50,17 +51,17 @@ export function VocabularyList() {
           </p>
         )}
       </form>
-      <ul className="flex-1 overflow-auto">
-        {isLoading && (
-          <li className="p-3 text-sm text-muted-foreground">…</li>
-        )}
-        {isError && (
-          <li className="p-3 text-sm text-destructive">{t("vocab.loadError")}</li>
-        )}
-        {data?.length === 0 && (
-          <li className="p-3 text-sm text-muted-foreground">{t("vocab.empty")}</li>
-        )}
-        {data?.map((v) => (
+      {isLoading ? (
+        <ListSkeleton className="flex-1 overflow-auto" />
+      ) : (
+        <ul className="flex-1 overflow-auto">
+          {isError && (
+            <li className="p-3 text-sm text-destructive">{t("vocab.loadError")}</li>
+          )}
+          {data?.length === 0 && (
+            <li className="p-3 text-sm text-muted-foreground">{t("vocab.empty")}</li>
+          )}
+          {data?.map((v) => (
           <li key={v.id} className="flex items-center gap-1 border-b pr-2">
             {editingId === v.id ? (
               <form
@@ -115,8 +116,9 @@ export function VocabularyList() {
               </>
             )}
           </li>
-        ))}
-      </ul>
+          ))}
+        </ul>
+      )}
     </div>
   );
 }