Merge pull request #101 from deriv-com/sandeep/lazy-loading

refactor: 🔥 added lazy loading for dashboard, chart and tutorial components
deriv-com · Oct 22, 2024 · 8ecff23 · 8ecff23
2 parents d88bb14 + 6883c8e
commit 8ecff23
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -16,25 +16,5 @@
         <div id="modal_root" class="modal-root"></div>
         <div id="popup_root" class="popup-root"></div>
         <div id="root"></div>
-
-        <script>
-            function loadGTM() {
-                (function (w, d, s, l, i) {
-                    w[l] = w[l] || [];
-                    w[l].push({
-                        'gtm.start': new Date().getTime(),
-                        event: 'gtm.js',
-                    });
-                    var f = d.getElementsByTagName(s)[0],
-                        j = d.createElement(s),
-                        dl = l != 'dataLayer' ? '&l=' + l : '';
-                    j.defer = true;
-                    j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
-                    f.parentNode.insertBefore(j, f);
-                })(window, document, 'script', 'dataLayer', 'GTM-NF7884S');
-            }
-
-            setTimeout(loadGTM, 3000);
-        </script>
     </body>
 </html>
diff --git a/src/app/app-content.jsx b/src/app/app-content.jsx
@@ -5,7 +5,6 @@ import { getUrlBase } from '@/components/shared';
 import TransactionDetailsModal from '@/components/transaction-details';
 import { api_base, ApiHelpers, ServerTime } from '@/external/bot-skeleton';
 import { useStore } from '@/hooks/useStore';
-import GTM from '@/utils/gtm';
 import { setSmartChartsPublicPath } from '@deriv/deriv-charts';
 import { Loader } from '@deriv-com/ui';
 import Audio from '../components/audio';
@@ -90,7 +89,10 @@ const AppContent = observer(() => {
     }, [client.is_options_blocked, client.account_settings?.country_code, client.clients_country]);
 
     const init = () => {
-        GTM.init();
+        // TODO: TBD
+        // import('@/utils/gtm').then(({ default: GTM }) => {
+        //     GTM.init();
+        // });
         ServerTime.init(common);
         app.setDBotEngineStores();
         ApiHelpers.setInstance(app.api_helpers_store);

diff --git a/src/pages/main/main.tsx b/src/pages/main/main.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { lazy, Suspense, useEffect } from 'react';
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -22,11 +22,12 @@ import { LegacyGuide1pxIcon } from '@deriv/quill-icons/Legacy';
 import { Localize, localize } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
 import RunPanel from '../../components/run-panel';
-import Chart from '../chart';
 import ChartModal from '../chart/chart-modal';
 import Dashboard from '../dashboard';
 import RunStrategy from '../dashboard/run-strategy';
-import Tutorial from '../tutorials';
+
+const Chart = lazy(() => import('../chart'));
+const Tutorial = lazy(() => import('../tutorials'));
 
 const AppWrapper = observer(() => {
     const { dashboard, load_modal, run_panel, quick_strategy, summary_card } = useStore();
@@ -205,7 +206,9 @@ const AppWrapper = observer(() => {
                                     : 'id-charts'
                             }
                         >
-                            <Chart show_digits_stats={false} />
+                            <Suspense fallback={<div>Loading...</div>}>
+                                <Chart show_digits_stats={false} />
+                            </Suspense>
                         </div>
                         <div
                             label={
@@ -222,7 +225,9 @@ const AppWrapper = observer(() => {
                             id='id-tutorials'
                         >
                             <div className='tutorials-wrapper'>
-                                <Tutorial handleTabChange={handleTabChange} />
+                                <Suspense fallback={<div>Loading...</div>}>
+                                    <Tutorial handleTabChange={handleTabChange} />
+                                </Suspense>
                             </div>
                         </div>
                     </Tabs>

diff --git a/src/utils/gtm.ts b/src/utils/gtm.ts
@@ -13,7 +13,22 @@ const GTM = (() => {
     };
 
     const init = () => {
-        // TODO:  initialize GTM - STANDALONE
+        function loadGTM() {
+            (function (w, d, s, l, i) {
+                w[l] = w[l] || [];
+                w[l].push({
+                    'gtm.start': new Date().getTime(),
+                    event: 'gtm.js',
+                });
+                const f = d.getElementsByTagName(s)[0],
+                    j = d.createElement(s),
+                    dl = l != 'dataLayer' ? '&l=' + l : '';
+                j.defer = true;
+                j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+                f.parentNode.insertBefore(j, f);
+            })(window, document, 'script', 'dataLayer', 'GTM-NF7884S');
+        }
+        loadGTM();
     };
 
     const onRunBot = (login_id: string, server_time: number, statistics: TStatistics): void => {