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 = () => { {t('left_menu.no_components_selected')} - ) : receiptLayoutName === selectedLayout ? ( + ) : receiptName === selectedLayout ? ( ) : ( 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(mapIFormLayoutsToFormLayouts(layouts)); - const [formLayoutData, setFormLayoutData] = useState( - 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 + return (