From 62bf325fc0fbfd6b0fbb78dbcff6c933d25f75e0 Mon Sep 17 00:00:00 2001
From: yavorsk <yavor.krastev@sitecore.com>
Date: Fri, 26 Apr 2024 15:25:28 +0300
Subject: [PATCH] add configurable loading message for Suspense component

---
 .../sitecore-jss-react/src/components/ErrorBoundary.tsx  | 9 +++++++--
 .../src/components/PlaceholderCommon.tsx                 | 6 ++++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/sitecore-jss-react/src/components/ErrorBoundary.tsx b/packages/sitecore-jss-react/src/components/ErrorBoundary.tsx
index 67ed9df57b..06a7bb69f7 100644
--- a/packages/sitecore-jss-react/src/components/ErrorBoundary.tsx
+++ b/packages/sitecore-jss-react/src/components/ErrorBoundary.tsx
@@ -14,6 +14,7 @@ export type ErrorBoundaryProps = {
     | React.FC<CustomErrorComponentProps>;
   rendering?: ComponentRendering;
   sitecoreContext: SitecoreContextValue;
+  componentLoadingMessage?: string;
   type: string;
 };
 
@@ -30,7 +31,7 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps> {
   }
 
   componentDidCatch(error: Error, errorInfo: any) {
-    console.log({ error, errorInfo });
+    console.error({ error, errorInfo });
   }
 
   render() {
@@ -61,7 +62,11 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps> {
     }
 
     return (
-      <Suspense fallback={<h4>Component is still loading...</h4>}>{this.props.children}</Suspense>
+      <Suspense
+        fallback={<h4>{this.props.componentLoadingMessage || 'Component is still loading...'}</h4>}
+      >
+        {this.props.children}
+      </Suspense>
     );
   }
 }
diff --git a/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx b/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx
index 5a124fe9e2..946f87c6ba 100644
--- a/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx
+++ b/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx
@@ -75,6 +75,11 @@ export interface PlaceholderProps {
    * the placeholder
    */
   errorComponent?: React.ComponentClass<ErrorComponentProps> | React.FC<ErrorComponentProps>;
+
+  /**
+   * The message that gets displayed while component is loading
+   */
+  componentLoadingMessage?: string;
 }
 
 export class PlaceholderCommon<T extends PlaceholderProps> extends React.Component<T> {
@@ -266,6 +271,7 @@ export class PlaceholderCommon<T extends PlaceholderProps> extends React.Compone
             key={element.type + '-' + id}
             customErrorComponent={this.props.errorComponent}
             rendering={element.props.rendering as ComponentRendering}
+            componentLoadingMessage={this.props.componentLoadingMessage}
             type={type}
           >
             {element}