From e4aa44400736edd828ebca60a8bc56e687dcee6f Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Sun, 19 Jun 2022 12:49:12 +0530
Subject: [PATCH] feat: Load Chatwoot SDK after load

---
 app/controllers/widget_tests_controller.rb |  9 +++-
 app/javascript/packs/sdk.js                | 50 ++++++++++++++++------
 app/javascript/sdk/constants.js            |  1 +
 app/javascript/sdk/settingsHelper.js       | 10 ++++-
 app/views/widget_tests/index.html.erb      | 14 +++---
 5 files changed, 60 insertions(+), 24 deletions(-)

diff --git a/app/controllers/widget_tests_controller.rb b/app/controllers/widget_tests_controller.rb
index 6d6742cf4..62f2f0883 100644
--- a/app/controllers/widget_tests_controller.rb
+++ b/app/controllers/widget_tests_controller.rb
@@ -1,9 +1,10 @@
 class WidgetTestsController < ActionController::Base
+  before_action :ensure_dark_mode
+  before_action :ensure_loading_type
   before_action :ensure_web_widget
   before_action :ensure_widget_position
-  before_action :ensure_widget_type
   before_action :ensure_widget_style
-  before_action :ensure_dark_mode
+  before_action :ensure_widget_type
 
   def index
     render
@@ -19,6 +20,10 @@ class WidgetTestsController < ActionController::Base
     @dark_mode = params[:dark_mode] || 'light'
   end
 
+  def ensure_loading_type
+    @loading_type = params[:loading_type] || 'immediate'
+  end
+
   def ensure_widget_position
     @widget_position = params[:position] || 'left'
   end
diff --git a/app/javascript/packs/sdk.js b/app/javascript/packs/sdk.js
index 064033841..077946fc8 100755
--- a/app/javascript/packs/sdk.js
+++ b/app/javascript/packs/sdk.js
@@ -3,6 +3,7 @@ import { IFrameHelper } from '../sdk/IFrameHelper';
 import {
   getBubbleView,
   getDarkMode,
+  getLoadingType,
   getWidgetStyle,
 } from '../sdk/settingsHelper';
 import {
@@ -12,7 +13,24 @@ import {
 } from '../sdk/cookieHelpers';
 import { addClass, removeClass } from '../sdk/DOMHelpers';
 import { SDK_SET_BUBBLE_VISIBILITY } from 'shared/constants/sharedFrameEvents';
-const runSDK = ({ baseUrl, websiteToken }) => {
+import { LOADING_TYPE } from '../sdk/constants';
+
+const isDocumentLoadComplete = () => document.readyState === 'complete';
+
+const runSDK = () => {
+  const { baseUrl, websiteToken } = window.$chatwoot;
+  IFrameHelper.createFrame({ baseUrl, websiteToken });
+};
+
+const initializeLoadEventListener = () => {
+  document.onreadystatechange = () => {
+    if (isDocumentLoadComplete()) {
+      runSDK();
+    }
+  };
+};
+
+export const initializeSDK = ({ baseUrl, websiteToken }) => {
   if (window.$chatwoot) {
     return;
   }
@@ -20,18 +38,19 @@ const runSDK = ({ baseUrl, websiteToken }) => {
   const chatwootSettings = window.chatwootSettings || {};
   window.$chatwoot = {
     baseUrl,
+    darkMode: getDarkMode(chatwootSettings.darkMode),
     hasLoaded: false,
     hideMessageBubble: chatwootSettings.hideMessageBubble || false,
     isOpen: false,
-    position: chatwootSettings.position === 'left' ? 'left' : 'right',
-    websiteToken,
-    locale: chatwootSettings.locale,
-    type: getBubbleView(chatwootSettings.type),
     launcherTitle: chatwootSettings.launcherTitle || '',
-    showPopoutButton: chatwootSettings.showPopoutButton || false,
-    widgetStyle: getWidgetStyle(chatwootSettings.widgetStyle) || 'standard',
+    loadingType: getLoadingType(chatwootSettings.loadingType),
+    locale: chatwootSettings.locale,
+    position: chatwootSettings.position === 'left' ? 'left' : 'right',
     resetTriggered: false,
-    darkMode: getDarkMode(chatwootSettings.darkMode),
+    showPopoutButton: chatwootSettings.showPopoutButton || false,
+    type: getBubbleView(chatwootSettings.type),
+    websiteToken,
+    widgetStyle: getWidgetStyle(chatwootSettings.widgetStyle) || 'standard',
 
     toggle(state) {
       IFrameHelper.events.toggleBubble(state);
@@ -136,13 +155,16 @@ const runSDK = ({ baseUrl, websiteToken }) => {
       window.$chatwoot.resetTriggered = true;
     },
   };
-
-  IFrameHelper.createFrame({
-    baseUrl,
-    websiteToken,
-  });
+  if (
+    window.$chatwoot.loadingType === LOADING_TYPE[0] ||
+    isDocumentLoadComplete()
+  ) {
+    runSDK();
+  } else {
+    initializeLoadEventListener();
+  }
 };
 
 window.chatwootSDK = {
-  run: runSDK,
+  run: initializeSDK,
 };
diff --git a/app/javascript/sdk/constants.js b/app/javascript/sdk/constants.js
index 7bf84d430..0d229e960 100644
--- a/app/javascript/sdk/constants.js
+++ b/app/javascript/sdk/constants.js
@@ -1,3 +1,4 @@
 export const BUBBLE_DESIGN = ['standard', 'expanded_bubble'];
 export const WIDGET_DESIGN = ['standard', 'flat'];
 export const DARK_MODE = ['light', 'auto'];
+export const LOADING_TYPE = ['immediate', 'load_complete'];
diff --git a/app/javascript/sdk/settingsHelper.js b/app/javascript/sdk/settingsHelper.js
index 657db1fe0..0f0f74841 100644
--- a/app/javascript/sdk/settingsHelper.js
+++ b/app/javascript/sdk/settingsHelper.js
@@ -1,4 +1,9 @@
-import { BUBBLE_DESIGN, DARK_MODE, WIDGET_DESIGN } from './constants';
+import {
+  BUBBLE_DESIGN,
+  DARK_MODE,
+  LOADING_TYPE,
+  WIDGET_DESIGN,
+} from './constants';
 
 export const getBubbleView = type =>
   BUBBLE_DESIGN.includes(type) ? type : BUBBLE_DESIGN[0];
@@ -12,3 +17,6 @@ export const isFlatWidgetStyle = style => style === 'flat';
 
 export const getDarkMode = darkMode =>
   DARK_MODE.includes(darkMode) ? darkMode : DARK_MODE[0];
+
+export const getLoadingType = loadingType =>
+  LOADING_TYPE.includes(loadingType) ? loadingType : LOADING_TYPE[0];
diff --git a/app/views/widget_tests/index.html.erb b/app/views/widget_tests/index.html.erb
index 3352f5a3a..da44aaf32 100644
--- a/app/views/widget_tests/index.html.erb
+++ b/app/views/widget_tests/index.html.erb
@@ -8,18 +8,18 @@
     @web_widget.hmac_token,
     user_id.to_s
   )
-
 %>
 <script>
 
 window.chatwootSettings = {
-  hideMessageBubble: false,
-  position: '<%= @widget_position %>',
-  locale: 'en',
-  type: '<%= @widget_type %>',
-  showPopoutButton: true,
-  widgetStyle: '<%= @widget_style %>',
   darkMode: '<%= @dark_mode %>',
+  hideMessageBubble: false,
+  loadingType: '<%= @loading_type %>',
+  locale: 'en',
+  position: '<%= @widget_position %>',
+  showPopoutButton: true,
+  type: '<%= @widget_type %>',
+  widgetStyle: '<%= @widget_style %>',
 };
 
 (function(d,t) {