fix: fire event only when loaded in AEM editor

Author: sharanyavinod

src/Constants.ts

@@ -45,7 +45,7 @@ export class Constants {
     /**
      * Event which indicates that content of remote component has been fetched and loaded in the app
      */
-    public static readonly REMOTE_CONTENT_LOADED = 'cq-remotecontent-loaded';
+    public static readonly REMOTE_CONTENT_LOADED_EVENT = 'cq-remotecontent-loaded';
 
     /**
      * Selector for WCM mode state meta property.

src/components/ModelProvider.tsx

@@ -91,8 +91,8 @@ export class ModelProvider extends Component<ModelProviderType> {
               this.setState(props);
 
               // Fire event once component model has been fetched and rendered to enable editing on AEM
-              if (injectPropsOnInit) {
-                  PathUtils.dispatchGlobalCustomEvent(Constants.REMOTE_CONTENT_LOADED, {});
+              if (injectPropsOnInit && Utils.isInEditor()) {
+                  PathUtils.dispatchGlobalCustomEvent(Constants.REMOTE_CONTENT_LOADED_EVENT, {});
               }
           }
         }).catch((error) => {

test/ModelProvider.test.tsx

@@ -169,7 +169,7 @@ describe('ModelProvider ->', () => {
             expect(childNode).toBeDefined();
 
             await waitFor(() =>
-                expect(dispatchEventSpy).toHaveBeenCalledWith(Constants.REMOTE_CONTENT_LOADED, {})
+                expect(dispatchEventSpy).toHaveBeenCalledWith(Constants.REMOTE_CONTENT_LOADED_EVENT, {})
             );
         });