diff --git a/packages/ui/src/components/Routes/Preview.tsx b/packages/ui/src/components/Routes/Preview.tsx index 2d5a0f113..27796d283 100644 --- a/packages/ui/src/components/Routes/Preview.tsx +++ b/packages/ui/src/components/Routes/Preview.tsx @@ -10,6 +10,7 @@ import { import React from 'react'; import { clear, useOperation } from '../../utils/operation'; +import { Loading } from '../Molecules/Loading'; import { PageDisplay } from '../Organisms/PageDisplay'; function usePreviewParameters(): OperationVariables< @@ -52,30 +53,54 @@ export function usePreviewRefresh() { } export function Preview() { - const { data } = useOperation(PreviewDrupalPageQuery, usePreviewParameters()); + const { data, isLoading, error } = useOperation( + PreviewDrupalPageQuery, + usePreviewParameters(), + ); const intl = useIntl(); - if (data?.preview) { - return ; - } else { - // @todo: load this content from Drupal settings, create a ForbiddenPage component. - const data403 = { - preview: { - title: '403 Forbidden', - locale: 'en' as Locale, - translations: [], - path: '/403' as Url, - content: [ - { - __typename: 'BlockMarkup', - markup: `

${intl.formatMessage({ - defaultMessage: - 'You do not have access to this page. Your access token might have expired.', - id: 'iAZszQ', - })}

`, - }, - ] as Exclude['content'], - }, - }; - return ; - } + // @todo load this content from Drupal settings, create a ForbiddenPage component. + // @todo forward error from the backend. + const data403 = { + preview: { + title: '403 Forbidden', + locale: 'en' as Locale, + translations: [], + path: '/403' as Url, + content: [ + { + __typename: 'BlockMarkup', + markup: `

${intl.formatMessage({ + defaultMessage: + 'You do not have access to this page. Your access token might have expired.', + id: 'iAZszQ', + })}

`, + }, + ] as Exclude['content'], + }, + }; + return ( + <> + {error ? ( +
+
+ {error} +
+
+ ) : ( + <> + {isLoading ? ( + + ) : ( + <> + {data?.preview ? ( + + ) : ( + + )} + + )} + + )} + + ); }