1719: Adds configurable loading component

Author: Ruben van Leeuwen

frontend/packages/pydantic-forms/src/components/render/RenderForm.tsx

@@ -26,18 +26,19 @@ const RenderForm = (contextProps: PydanticFormContextProps) => {
         title,
         headerComponent,
         skipSuccessNotice,
+        loadingComponent,
     } = contextProps;
 
-    if (isLoading && !isSending) {
-        return <div>Formulier aan het ophalen... A</div>;
-    }
+    const LoadingComponent = loadingComponent ?? (
+        <div>Formulier aan het ophalen...</div>
+    );
 
-    if (!pydanticFormSchema) {
-        return <div>Formulier aan het ophalen... B</div>;
+    if (isLoading && !isSending) {
+        return LoadingComponent;
     }
 
-    if (isSending) {
-        return <div>Formulier aan het verzenden...</div>;
+    if (!pydanticFormSchema || isSending) {
+        return LoadingComponent;
     }
 
     if (isFullFilled) {

frontend/packages/pydantic-forms/src/core/PydanticFormContextProvider.tsx

@@ -64,6 +64,7 @@ function PydanticFormContextProvider({
     sendLabel,
     headerComponent,
     footerComponent,
+    loadingComponent,
     successNotice,
     onSuccess,
     onCancel,
@@ -320,6 +321,7 @@ function PydanticFormContextProvider({
         pydanticFormSchema,
         headerComponent,
         footerComponent,
+        loadingComponent,
         onCancel,
         title,
         sendLabel,

frontend/packages/pydantic-forms/src/types.ts

@@ -28,6 +28,7 @@ export interface PydanticFormInitialContextProps {
     children: (props: PydanticFormContextProps) => React.ReactNode;
     headerComponent?: React.ReactNode;
     footerComponent?: React.ReactNode;
+    loadingComponent?: React.ReactNode;
     hasCardWrapper?: boolean;
 
     config: PydanticFormsContextConfig;
@@ -65,6 +66,7 @@ export interface PydanticFormContextProps {
     successNotice?: React.ReactNode;
     headerComponent?: React.ReactNode;
     footerComponent?: React.ReactNode;
+    loadingComponent?: React.ReactNode;
     allowUntouchedSubmit?: boolean;
     skipSuccessNotice?: boolean;
     footerCtaPrimaryVariant?: string;