fix: add loading placeholder to dashboard list pages

src/components/Dashboard/Agents/AgentListController.tsx

@@ -1,6 +1,7 @@
 import { ApiAgentGetList, ApiOptionLists, SortOrder } from "need4deed-sdk";
 import { AgentCardList } from "./AgentCardList";
 import { useEffect } from "react";
+import { DashboardListLoading } from "@/components/Dashboard/common/DashboardListLoading";
 import { useGetQuery, usePageParam } from "@/hooks";
 import { apiPathAgent, cacheTTL } from "@/config/constants";
 import { serializeAgentFilters } from "./helpers";
@@ -29,7 +30,7 @@ export const AgentListController = ({ setNumOfAgents, sortOrder, isFiltersOpen,
     }),
   );
 
-  const { data, count } = useGetQuery<ApiAgentGetList[]>({
+  const { data, count, isLoading } = useGetQuery<ApiAgentGetList[]>({
     queryKey: ["agents"],
     apiPath: `${apiPathAgent}/`,
     params: {
@@ -48,6 +49,8 @@ export const AgentListController = ({ setNumOfAgents, sortOrder, isFiltersOpen,
     setNumOfAgents(count);
   }, [count, setNumOfAgents]);
 
+  if (isLoading) return <DashboardListLoading />;
+
   return (
     <AgentCardList
       agents={agents}

src/components/Dashboard/Opportunities/OpportunityListController.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { DashboardListLoading } from "@/components/Dashboard/common/DashboardListLoading";
 import { apiPathOpportunity, cacheTTL } from "@/config/constants";
 import { useGetQuery, usePageParam } from "@/hooks";
 import { ApiVolunteerOpportunityGetList, ApiOptionLists, SortOrder } from "need4deed-sdk";
@@ -64,7 +65,7 @@ export function OpportunityListController({
 
   const backendSortOrder = isAppointmentSort(sortOrder) ? SortOrder.NewToOld : (sortOrder as SortOrder);
 
-  const { data, count } = useGetQuery<ApiVolunteerOpportunityGetList[]>({
+  const { data, count, isLoading } = useGetQuery<ApiVolunteerOpportunityGetList[]>({
     queryKey: ["opportunities"],
     apiPath: `${apiPathOpportunity}/`,
     params: {
@@ -85,6 +86,8 @@ export function OpportunityListController({
     setNumOfOpps(count);
   }, [count, setNumOfOpps]);
 
+  if (isLoading) return <DashboardListLoading />;
+
   return (
     <OpportunityCardList
       activitiesList={apiFilterOptions?.activity}

src/components/Dashboard/Profile/sections/AccompanyingDetails/AccompanyingDetails.tsx

@@ -3,7 +3,7 @@ import { useApiLanguages } from "@/components/Dashboard/Profile/sections/Volunte
 import { useUpdateOpportunityAccompanyingDetails } from "@/hooks/useUpdateOpportunityAccompanyingDetails";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { de, enUS } from "date-fns/locale";
-import { ApiOpportunityGet, TranslatedIntoType } from "need4deed-sdk";
+import { ApiOpportunityAccompanyingDetails, ApiOpportunityGet, Lang, Option, TranslatedIntoType } from "need4deed-sdk";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -121,6 +121,17 @@ export const AccompanyingDetails = forwardRef<EditableSectionRef, Props>(functio
     .map((lang) => keyToLabel[String(lang.id)] || String(lang.id))
     .join(", ");
 
+  // appointmentDistrict is server-calculated from postcode — read from API response, never from form state
+  const rawDetails = opportunity.accompanyingDetails as ApiOpportunityAccompanyingDetails & {
+    appointmentPostcode?: string;
+    appointmentDistrict?: Option;
+  };
+  const lang = i18n.language as Lang;
+  const districtTitle =
+    rawDetails?.appointmentDistrict?.title?.[lang] ?? rawDetails?.appointmentDistrict?.title?.de ?? "";
+  const postcode = rawDetails?.appointmentPostcode || "";
+  const postcodeDisplay = postcode && districtTitle ? `${postcode}, ${districtTitle}` : postcode;
+
   return (
     <FormProvider {...methods}>
       <Container data-testid="accompanying-details-container" $isEditing={isEditing}>
@@ -139,7 +150,11 @@ export const AccompanyingDetails = forwardRef<EditableSectionRef, Props>(functio
             minAppointmentDate={minAppointmentDate}
           />
         ) : (
-          <AccompanyingDetailsDisplay values={formValues} languageLabel={languageLabel} />
+          <AccompanyingDetailsDisplay
+            values={formValues}
+            languageLabel={languageLabel}
+            postcodeDisplay={postcodeDisplay}
+          />
         )}
       </Container>
     </FormProvider>

src/components/Dashboard/Profile/sections/AccompanyingDetails/AccompanyingDetailsDisplay.tsx

@@ -9,9 +9,10 @@ import { DateFieldRow, Details } from "./styles";
 type Props = {
   values: AccompanyingDetailsFormData;
   languageLabel: string;
+  postcodeDisplay: string;
 };
 
-export const AccompanyingDetailsDisplay = ({ values, languageLabel }: Props) => {
+export const AccompanyingDetailsDisplay = ({ values, languageLabel, postcodeDisplay }: Props) => {
   const { t } = useTranslation();
 
   return (
@@ -28,7 +29,7 @@ export const AccompanyingDetailsDisplay = ({ values, languageLabel }: Props) =>
         mode="display"
         type="text"
         label={t("dashboard.opportunityProfile.accompanyingDetails.appointmentPostcode")}
-        value={values.appointmentPostcode || ""}
+        value={postcodeDisplay}
         setValue={() => {}}
       />
 

src/components/Dashboard/Volunteers/VolunteerListController.tsx

@@ -1,11 +1,12 @@
 import { useEffect } from "react";
 
+import { DashboardListLoading } from "@/components/Dashboard/common/DashboardListLoading";
 import { apiPathVolunteer, cacheTTL, TABLE_LIMIT } from "@/config/constants";
 import { useGetQuery, usePageParam } from "@/hooks";
 import { ApiOptionLists, ApiVolunteerGetList, SortOrder } from "need4deed-sdk";
 import { CardsFilter } from "./Filters/types";
 import { serializeFilters } from "./helpers";
-import { VolunteerCardList } from "./VolunteerCardList"; // We will modify this component
+import { VolunteerCardList } from "./VolunteerCardList";
 import { VolunteerTableList } from "./VolunteerTableList";
 
 const CARD_COLUMNS = 3;
@@ -49,7 +50,7 @@ export function VolunteerListController({
     sortOrder,
     filter: serializedFilter,
   };
-  const { data, count } = useGetQuery<ApiVolunteerGetList[]>({
+  const { data, count, isLoading } = useGetQuery<ApiVolunteerGetList[]>({
     queryKey: ["volunteers"],
     apiPath: apiPathVolunteer,
     params,
@@ -61,6 +62,8 @@ export function VolunteerListController({
     setNumOfVols(count);
   }, [count, setNumOfVols]);
 
+  if (isLoading) return <DashboardListLoading />;
+
   if (isListView) {
     return (
       <VolunteerTableList

src/components/Dashboard/common/DashboardListLoading.tsx

@@ -0,0 +1,20 @@
+import { Heading4 } from "@/components/styled/text";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+
+const Container = styled.div`
+  display: flex;
+  flex: 1;
+  min-height: var(--dashboard-home-container-min-height, 300px);
+  align-items: center;
+  justify-content: center;
+`;
+
+export function DashboardListLoading() {
+  const { t } = useTranslation();
+  return (
+    <Container>
+      <Heading4>{t("dashboard.home.content.loading")}</Heading4>
+    </Container>
+  );
+}

src/hooks/useUpdateOpportunityAccompanyingDetails.ts

@@ -6,7 +6,6 @@ export type OpportunityAccompanyingDetailsUpdateData = {
   accompanyingDetails: {
     appointmentAddress?: string;
     appointmentPostcode?: string;
-    appointmentDistrict?: string;
     appointmentDate?: string;
     appointmentTime?: string;
     refugeeNumber?: string;