From c88db6ece1a02483600c967be1ae183757b564ae Mon Sep 17 00:00:00 2001
From: malmen237 <linda.malm@eyevinn.se>
Date: Tue, 23 Apr 2024 09:12:21 +0200
Subject: [PATCH] feat: added loader to add-production-id-message

---
 src/components/landing-page/join-production.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/landing-page/join-production.tsx b/src/components/landing-page/join-production.tsx
index 76596658..7b75ad66 100644
--- a/src/components/landing-page/join-production.tsx
+++ b/src/components/landing-page/join-production.tsx
@@ -17,6 +17,7 @@ import { useFetchProduction } from "./use-fetch-production.ts";
 import { darkText, errorColour } from "../../css-helpers/defaults.ts";
 import { TJoinProductionOptions } from "../production-line/types.ts";
 import { uniqBy } from "../../helpers.ts";
+import { LoaderDots } from "../loader/loader.tsx";
 
 type FormValues = TJoinProductionOptions;
 
@@ -55,8 +56,11 @@ export const JoinProduction = ({ preSelected }: TProps) => {
 
   const [{ devices }, dispatch] = useGlobalState();
 
-  const { error: productionFetchError, production } =
-    useFetchProduction(joinProductionId);
+  const {
+    error: productionFetchError,
+    production,
+    loading,
+  } = useFetchProduction(joinProductionId);
 
   // Update selected line id when a new production is fetched
   useEffect(() => {
@@ -232,6 +236,7 @@ export const JoinProduction = ({ preSelected }: TProps) => {
               {!production && (
                 <StyledWarningMessage>
                   Please enter a production id
+                  {loading && <LoaderDots className="in-active" text="" />}
                 </StyledWarningMessage>
               )}
             </FormLabel>