Set layouts as empty array if not loaded yet

Altinn · Oct 20, 2023 · adba2de · adba2de
1 parent 756c2ab
commit adba2de
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 20 deletions.
diff --git 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
@@ -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
@@ -20,48 +20,46 @@ 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
  */
 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>