Improve loading and error handling in ReadyForPrint (#3840)

* improve loading and error handling in readyforprint

* fix test description

* strict equality

* use fatal error in dev as well

* use loading attribute in signeelistsummary

* add todo

* clarify comments

* remove comment

Author: bjosttveit

src/app-components/Button/Button.tsx

@@ -1,9 +1,10 @@
 import React, { forwardRef } from 'react';
 import type { PropsWithChildren } from 'react';
 
-import { Button as DesignSystemButton, Spinner } from '@digdir/designsystemet-react';
+import { Button as DesignSystemButton } from '@digdir/designsystemet-react';
 import type { ButtonProps as DesignSystemButtonProps } from '@digdir/designsystemet-react';
 
+import { Spinner } from 'src/app-components/loading/Spinner/Spinner';
 import { useLanguage } from 'src/features/language/useLanguage';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | undefined;

src/app-components/Table/Table.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import type { ReactElement } from 'react';
 
-import { Button, Spinner, Table } from '@digdir/designsystemet-react';
+import { Button, Table } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 import { format, isValid, parseISO } from 'date-fns';
 import { pick } from 'dot-object';
 import type { JSONSchema7 } from 'json-schema';
 
+import { Spinner } from 'src/app-components/loading/Spinner/Spinner';
 import classes from 'src/app-components/Table/Table.module.css';
 import utilClasses from 'src/styles/utils.module.css';
 import type { FormDataValue } from 'src/app-components/DynamicForm/DynamicForm';

src/app-components/error/FatalError/FatalError.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+
+/**
+ * The `data-fatal-error` signals that some unrecoverable error occured which should prevent PDF generation from happening as it would not include necessary information.
+ */
+export function FatalError({ children, ...props }: PropsWithChildren<HTMLAttributes<HTMLDivElement>>) {
+  return (
+    <div
+      data-fatal-error
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}

src/app-components/error/FatalErrorEmpty/FatalErrorEmpty.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+/**
+ * The `data-fatal-error` signals that some unrecoverable error occured which should prevent PDF generation from happening as it would not include necessary information.
+ */
+export function FatalErrorEmpty() {
+  return (
+    <div
+      data-fatal-error
+      style={{ display: 'none' }}
+    />
+  );
+}

src/components/atoms/AltinnContentIcon.tsx renamed to src/app-components/loading/AltinnContentLoader/AltinnContentIcon.tsx

@@ -4,6 +4,7 @@ export function AltinnContentIconFormData() {
   return (
     <>
       <rect
+        data-testid='AltinnContentIconFormData'
         x='0'
         y='0'
         rx='0'

src/components/atoms/AltinnContentIconFormData.tsx renamed to src/app-components/loading/AltinnContentLoader/AltinnContentIconFormData.tsx

@@ -4,6 +4,7 @@ export function AltinnContentIconReceipt() {
   return (
     <>
       <rect
+        data-testid='AltinnContentIconReceipt'
         x='12'
         y='11'
         rx='0'

src/components/atoms/AltinnContentIconReceipt.tsx renamed to src/app-components/loading/AltinnContentLoader/AltinnContentIconReceipt.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { render as rtlRender, screen } from '@testing-library/react';
+
+import {
+  AltinnContentLoader,
+  IAltinnContentLoaderProps,
+} from 'src/app-components/loading/AltinnContentLoader/AltinnContentLoader';
+
+const render = (props: Omit<IAltinnContentLoaderProps, 'reason'> = {}) => {
+  const allProps = {
+    ...props,
+  };
+
+  rtlRender(
+    <AltinnContentLoader
+      reason='testing'
+      {...allProps}
+    />,
+  );
+};
+
+describe('AltinnContentLoader', () => {
+  it('should show default loader when no variant is set', () => {
+    render();
+
+    expect(screen.getByTestId('AltinnContentIcon')).toBeInTheDocument();
+    expect(screen.queryByTestId('AltinnContentIconFormData')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('AltinnContentIconReceipt')).not.toBeInTheDocument();
+  });
+
+  it('should show form loader when variant=form', () => {
+    render({ variant: 'form' });
+
+    expect(screen.queryByTestId('AltinnContentIconFormData')).toBeInTheDocument();
+    expect(screen.queryByTestId('AltinnContentIconReceipt')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('AltinnContentIcon')).not.toBeInTheDocument();
+  });
+
+  it('should show receipt loader when variant=receipt', () => {
+    render({ variant: 'receipt' });
+
+    expect(screen.queryByTestId('AltinnContentIconReceipt')).toBeInTheDocument();
+    expect(screen.queryByTestId('AltinnContentIconFormData')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('AltinnContentIcon')).not.toBeInTheDocument();
+  });
+});

src/app-components/loading/AltinnContentLoader/AltinnContentLoader.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+import { AltinnContentIcon } from 'src/app-components/loading/AltinnContentLoader/AltinnContentIcon';
+import { AltinnContentIconFormData } from 'src/app-components/loading/AltinnContentLoader/AltinnContentIconFormData';
+import { AltinnContentIconReceipt } from 'src/app-components/loading/AltinnContentLoader/AltinnContentIconReceipt';
+
+type LoaderVariant = 'default' | 'form' | 'receipt';
+
+export interface IAltinnContentLoaderProps {
+  reason: string;
+  details?: string;
+
+  variant?: LoaderVariant;
+  height?: number | string;
+  width?: number | string;
+}
+
+interface LoaderIconProps {
+  variant?: LoaderVariant;
+}
+
+function LoaderIcon({ variant }: LoaderIconProps) {
+  switch (variant) {
+    case 'form':
+      return <AltinnContentIconFormData />;
+    case 'receipt':
+      return <AltinnContentIconReceipt />;
+    case 'default':
+    default:
+      return <AltinnContentIcon />;
+  }
+}
+
+/**
+ * The `data-loading` signals that something is pending and we should not print PDF yet.
+ */
+export const AltinnContentLoader = ({
+  reason,
+  details,
+  variant,
+  width = 400,
+  height = 200,
+}: IAltinnContentLoaderProps) => (
+  <div
+    data-loading
+    data-testid='loader'
+    data-reason={reason}
+    data-details={details}
+  >
+    <ContentLoader
+      height={height}
+      width={width}
+    >
+      <LoaderIcon variant={variant} />
+    </ContentLoader>
+  </div>
+);

src/app-components/loading/AltinnContentLoader/AltinnContentLoader.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+/**
+ * The `data-loading` signals that something is pending and we should not print PDF yet.
+ */
+export function LoadingEmpty() {
+  return (
+    <div
+      data-loading
+      style={{ display: 'none' }}
+    />
+  );
+}