add configurable loading message for Suspense component

Sitecore · Apr 26, 2024 · 62bf325 · 62bf325
1 parent 181237a
commit 62bf325
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git 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
@@ -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}