fix(cc-samples): add loader on init and expand CAD (#487)

mkesavan13 · web-flow · commit c3196576a2e5 · 2025-07-03T20:46:36.000+05:30
diff --git a/widgets-samples/cc/samples-cc-react-app/public/index.html b/widgets-samples/cc/samples-cc-react-app/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>CC Widgets in React</title>
+    <title>Contact Center Widgets in a React App</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/widgets-samples/cc/samples-cc-react-app/src/App.tsx b/widgets-samples/cc/samples-cc-react-app/src/App.tsx
@@ -350,14 +350,23 @@ const onTaskDeclined = (task,reason) => {
       });
   };
 
+  const formatWidgetName = (widget: string) => {
+    switch (widget) {
+      case 'callControlCAD':
+        return 'Call Controls with Call Associated Data (CAD)';
+      default:
+        return widget.charAt(0).toUpperCase() + widget.slice(1).replace(/([A-Z])/g, ' $1');
+    }
+  };
+
   return (
     <div className="app mds-typography">
       <ThemeProvider
         themeclass={currentTheme === 'LIGHT' ? 'mds-theme-stable-lightWebex' : 'mds-theme-stable-darkWebex'}
       >
         <IconProvider iconSet="momentum-icons">
           <div className="webexTheme">
-            <h1>Contact Center widgets in a react app</h1>
+            <h1>Contact Center Widgets in a React app</h1>
               {showLoader && (
                 <div className="profile-loader-overlay">
                     <div className="profile-loader-spinner" aria-label="Loading" />
@@ -451,7 +460,7 @@ const onTaskDeclined = (task,reason) => {
                               data-testid={`samples:widget-${widget}`}
                             />
                             &nbsp;
-                            {widget.charAt(0).toUpperCase() + widget.slice(1).replace(/([A-Z])/g, ' $1')}&nbsp;
+                            {formatWidgetName(widget)}&nbsp;
                             {widget === 'outdialCall' && (
                               <span style={{display: 'inline-flex', alignItems: 'center'}}>
                                 <PopoverNext
@@ -567,8 +576,10 @@ const onTaskDeclined = (task,reason) => {
               <Button
                 disabled={accessToken.trim() === ''}
                 onClick={() => {
+                  setShowLoader(true);
                   store.init({webexConfig, access_token: accessToken}).then(() => {
                     setIsSdkReady(true);
+                    setShowLoader(false);
                   });
                 }}
                 data-testid="samples:init-widgets-button"
@@ -707,7 +718,7 @@ const onTaskDeclined = (task,reason) => {
                       <div className="box">
                         <section className="section-box">
                           <fieldset className="fieldset">
-                            <legend className="legend-box">Call Control CAD</legend>
+                            <legend className="legend-box">Call Control with Call Associated Data (CAD)</legend>
                             <CallControlCAD
                               onHoldResume={onHoldResume}
                               onEnd={onEnd}
