1891: Reintroduces loadinComponent

Author: Ruben van Leeuwen

frontend/apps/example/src/app/page.tsx

@@ -104,6 +104,7 @@ export default function Home() {
                     componentMatcherExtender: componentMatcher,
                     customTranslations: customTranslations,
                     locale: locale,
+                    loadingComponent: <div>Custom loading component</div>,
                 }}
             />
         </div>

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

@@ -35,7 +35,9 @@ const RenderForm = (contextProps: PydanticFormContextProps) => {
 
     const t = useTranslations('renderForm');
 
-    const LoadingComponent = <div>{t('loading')}</div>;
+    const LoadingComponent = config.loadingComponent ?? (
+        <div>{t('loading')}</div>
+    );
 
     if (isLoading && !isSending) {
         return LoadingComponent;

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

@@ -261,6 +261,8 @@ export interface PydanticFormsContextConfig {
     // translations
     customTranslations?: TranslationsJSON;
 
+    loadingComponent?: React.ReactNode;
+
     // locale
     locale?: Locale;
 }