catalog search/sort, edit-page characteristics, preferred vendor per article

frontend/src/pages/Ausruestungsanfrage.tsx

@@ -9,7 +9,7 @@ import {
   Add as AddIcon, Delete as DeleteIcon, Edit as EditIcon,
   Check as CheckIcon, Close as CloseIcon, Settings as SettingsIcon,
 } from '@mui/icons-material';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useQuery, useMutation, useQueryClient, keepPreviousData } from '@tanstack/react-query';
 import { useSearchParams, useNavigate } from 'react-router-dom';
 import DashboardLayout from '../components/dashboard/DashboardLayout';
 import ChatAwareFab from '../components/shared/ChatAwareFab';
@@ -170,12 +170,13 @@ function KatalogTab() {
   const [sortField, setSortField] = useState<'bezeichnung' | 'kategorie'>('bezeichnung');
   const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');
 
-  const { data: items = [], isLoading } = useQuery({
+  const { data: items = [], isLoading, isFetching } = useQuery({
     queryKey: ['ausruestungsanfrage', 'items', filterKategorie, search],
     queryFn: () => ausruestungsanfrageApi.getItems({
       ...(filterKategorie ? { kategorie_id: filterKategorie as number } : {}),
       ...(search.trim() ? { search: search.trim() } : {}),
     }),
+    placeholderData: keepPreviousData,
   });
 
   const { data: kategorien = [] } = useQuery({
@@ -261,10 +262,13 @@ function KatalogTab() {
 
       {isLoading ? (
         <Typography color="text.secondary">Lade Katalog...</Typography>
-      ) : items.length === 0 ? (
+      ) : items.length === 0 && !isFetching ? (
         <Typography color="text.secondary">Keine Artikel vorhanden.</Typography>
       ) : (
-        <TableContainer component={Paper} variant="outlined">
+        <TableContainer component={Paper} variant="outlined" sx={{ opacity: isFetching ? 0.6 : 1, transition: 'opacity 150ms' }}>
+        <Typography color="text.secondary">Keine Artikel vorhanden.</Typography>
+      ) : (
+        <TableContainer component={Paper} variant="outlined" sx={{ opacity: isFetching ? 0.6 : 1, transition: 'opacity 150ms' }}>
           <Table size="small">
             <TableHead>
               <TableRow>