edited mailer and changed orchestration

Co-authored-by: Copilot <copilot@github.com>

FrontendV2/src/pages/ContactPage.tsx

@@ -5,6 +5,8 @@ import {
   Alert,
   Container,
   Text,
+  VStack,
+  Spinner,
 } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { useState } from "react";
@@ -21,9 +23,21 @@ interface Alert {
 export const ContactPage = () => {
   const { t } = useTranslation();
   const [message, setMessage] = useState("");
+  const [isSending, setIsSending] = useState(false);
   const [alert, setAlert] = useState<Alert | null>(null);
 
   const sendMessage = async () => {
+    setIsSending(true);
+    if (message.trim() === "") {
+      setAlert({
+        type: "error",
+        headline: t("contactPage_messageErrorHeadline"),
+        text: t("contactPage_messageErrorText2"),
+      });
+      setIsSending(false);
+      return;
+    }
+
     // Logic to send the message
     const result = await fetch(`${API_BASE}/api/users/contact`, {
       method: "POST",
@@ -55,6 +69,7 @@ export const ContactPage = () => {
         text: t("contactPage_errorText"),
       });
     }
+    setIsSending(false);
   };
 
   return (
@@ -84,6 +99,12 @@ export const ContactPage = () => {
           </Alert.Content>
         </Alert.Root>
       )}
+      {isSending && (
+        <VStack colorPalette="teal">
+          <Spinner color="colorPalette.600" />
+          <Text color="colorPalette.600">{t("loading")}</Text>
+        </VStack>
+      )}
       <Button onClick={sendMessage}>{t("contactPage_sendButton")}</Button>
     </Container>
   );