From adba2de654bd185f40018437032fed81b156aa95 Mon Sep 17 00:00:00 2001
From: andrealouisestanderen <andreastanderen@gmail.com>
Date: Wed, 11 Oct 2023 15:54:32 +0200
Subject: [PATCH] Set layouts as empty array if not loaded yet

---
 frontend/packages/ux-editor/src/App.tsx       |  6 ++--
 .../src/components/Elements/Elements.tsx      |  6 ++--
 .../src/containers/DesignView/DesignView.tsx  | 28 +++++++++----------
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/frontend/packages/ux-editor/src/App.tsx b/frontend/packages/ux-editor/src/App.tsx
index 4266faf5533..6bf2e51eeeb 100644
--- a/frontend/packages/ux-editor/src/App.tsx
+++ b/frontend/packages/ux-editor/src/App.tsx
@@ -42,9 +42,9 @@ export function App() {
 
   useEffect(() => {
     if (
-      areLayoutSetsFetched &&
-      selectedLayoutSetInPreview &&
-      (!layoutSets || !layoutSets.sets.map((set) => set.id).includes(selectedLayoutSetInPreview))
+        areLayoutSetsFetched &&
+        selectedLayoutSetInPreview &&
+        (!layoutSets || !layoutSets.sets.map((set) => set.id).includes(selectedLayoutSetInPreview))
     )
       removeSelectedLayoutSetInPreview();
   }, [
diff --git a/frontend/packages/ux-editor/src/components/Elements/Elements.tsx b/frontend/packages/ux-editor/src/components/Elements/Elements.tsx
index 07d01384080..c49337cfb9d 100644
--- a/frontend/packages/ux-editor/src/components/Elements/Elements.tsx
+++ b/frontend/packages/ux-editor/src/components/Elements/Elements.tsx
@@ -23,8 +23,8 @@ export const Elements = () => {
   const selectedLayout: string = useSelector(selectedLayoutNameSelector);
   const selectedLayoutSet: string = useSelector(selectedLayoutSetSelector);
   const layoutSetsQuery = useLayoutSetsQuery(org, app);
-  const formLayoutSettingsQuery = useFormLayoutSettingsQuery(org, app, selectedLayoutSet);
-  const { receiptLayoutName } = formLayoutSettingsQuery.data;
+  const { data: formLayoutSettings } = useFormLayoutSettingsQuery(org, app, selectedLayoutSet);
+  const receiptName = formLayoutSettings?.receiptLayoutName;
   const layoutSetNames = layoutSetsQuery?.data?.sets;
 
   const hideComponents = selectedLayout === 'default' || selectedLayout === undefined;
@@ -56,7 +56,7 @@ export const Elements = () => {
           <Paragraph className={classes.noPageSelected} size='small'>
             {t('left_menu.no_components_selected')}
           </Paragraph>
-        ) : receiptLayoutName === selectedLayout ? (
+        ) : receiptName === selectedLayout ? (
           <ConfPageToolbar />
         ) : (
           <DefaultToolbar />
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/DesignView.tsx b/frontend/packages/ux-editor/src/containers/DesignView/DesignView.tsx
index 4cc1d1dc8dc..26d212dde97 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/DesignView.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/DesignView.tsx
@@ -20,10 +20,11 @@ import { setSelectedLayoutInLocalStorage } from '../../utils/localStorageUtils';
 import { PageAccordion } from './PageAccordion';
 import { RenderedFormContainer } from './RenderedFormContainer';
 import { ReceiptContent } from './ReceiptContent';
+import {PageSpinner} from "app-shared/components";
 
 /**
  * @component
- *    Displays the column containing accordions with componnets for each page
+ *    Displays the column containing accordions with components for each page
  *
  * @returns {ReactNode} - The rendered component
  */
@@ -31,37 +32,34 @@ export const DesignView = (): ReactNode => {
   const dispatch = useDispatch();
   const { org, app } = useStudioUrlParams();
   const selectedLayoutSet: string = useSelector(selectedLayoutSetSelector);
+  const addLayoutMutation = useAddLayoutMutation(org, app, selectedLayoutSet);
   const { data: layouts } = useFormLayoutsQuery(org, app, selectedLayoutSet);
-
   const { data: instanceId } = useInstanceIdQuery(org, app);
   const { data: formLayoutSettings } = useFormLayoutSettingsQuery(org, app, selectedLayoutSet);
-  const formLayoutSettingsQuery = useFormLayoutSettingsQuery(org, app, selectedLayoutSet);
-  const receiptName = formLayoutSettingsQuery.data.receiptLayoutName;
-
-  const layoutOrder = formLayoutSettingsQuery.data.pages.order;
+  
+  const receiptName = formLayoutSettings?.receiptLayoutName;
+  const layoutOrder = formLayoutSettings?.pages.order;
 
   const [searchParams, setSearchParams] = useSearchParams();
   const searchParamsLayout = searchParams.get('layout');
+  const [openAccordion, setOpenAccordion] = useState(searchParamsLayout);
 
   const { t } = useTranslation();
 
-  const addLayoutMutation = useAddLayoutMutation(org, app, selectedLayoutSet);
-
-  const [openAccordion, setOpenAccordion] = useState(searchParamsLayout);
-
   /**
    * Maps the IFormLayouts object to a list of FormLayouts
    */
   const mapIFormLayoutsToFormLayouts = (iFormLayouts: IFormLayouts): FormLayout[] => {
+    if (!layouts) return [];
     return Object.entries(iFormLayouts).map(([key, value]) => ({
       page: key,
       data: value,
     }));
   };
+  
+  const [formLayoutData, setFormLayoutData] = useState<FormLayout[]>(mapIFormLayoutsToFormLayouts(layouts));
 
-  const [formLayoutData, setFormLayoutData] = useState<FormLayout[]>(
-    mapIFormLayoutsToFormLayouts(layouts),
-  );
+  const designViewIsReady = formLayoutData && formLayoutSettings;
 
   useEffect(() => {
     setOpenAccordion(searchParamsLayout);
@@ -133,7 +131,7 @@ export const DesignView = (): ReactNode => {
    * Displays the pages as an ordered list
    */
   const displayPageAccordions = layoutOrder.map((pageName, i) => {
-    const layout = formLayoutData.find((formLayout) => formLayout.page === pageName);
+    const layout = formLayoutData?.find((formLayout) => formLayout.page === pageName);
 
     // If the layout does not exist, return null
     if (layout === undefined) return null;
@@ -159,6 +157,8 @@ export const DesignView = (): ReactNode => {
     );
   });
 
+  if (!designViewIsReady) return <PageSpinner/>
+
   return (
     <div className={classes.root}>
       <div>