fix(web): search 503 vs error (#34); terms/authorities list error states (#31); authority-tab a11y + dead keys (#32); authority-kind test (#37)

web/src/vocab/vocabularies.test.tsx

@@ -52,6 +52,14 @@ test("selecting a vocabulary shows its terms and adds one", async () => {
   );
 });
 
+test("terms endpoint error shows vocab loadError", async () => {
+  server.use(
+    http.get("/api/admin/vocabularies/:id/terms", () => new HttpResponse(null, { status: 500 })),
+  );
+  renderApp(tree(), { route: "/vocabularies/v-material" });
+  expect(await screen.findByText(/could not load/i)).toBeInTheDocument();
+});
+
 test("add term without EN label shows required alert and does not POST", async () => {
   let posted = false;
   server.use(

web/src/vocab/vocabulary-terms.tsx

@@ -19,7 +19,7 @@ export function VocabularyTerms() {
 
   const lang = i18n.language.startsWith("sv") ? "sv" : "en";
 
-  const { data: terms } = useTerms(id);
+  const { data: terms, isLoading, isError } = useTerms(id);
 
   const addTerm = useAddTerm();
 
@@ -53,7 +53,13 @@ export function VocabularyTerms() {
         {t("vocab.terms")}
       </h3>
       <ul className="mb-4">
-        {terms?.length === 0 && (
+        {isLoading && (
+          <li className="text-sm text-neutral-400">…</li>
+        )}
+        {isError && (
+          <li className="text-sm text-red-600">{t("vocab.loadError")}</li>
+        )}
+        {!isLoading && !isError && terms?.length === 0 && (
           <li className="text-sm text-neutral-500">{t("vocab.noTerms")}</li>
         )}
         {terms?.map((term) => (