From 102445b0826a14743a8c74635e3e21fdf7cc7574 Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <51911425+giuliaghisini@users.noreply.github.com>
Date: Mon, 8 Apr 2024 12:58:35 +0200
Subject: [PATCH] chore: lazy loading components to improve bundle size (#4)

* chore: lazy loading components to improve boundle size

* fix: typo

* chore: fix typo
---
 src/components/FeedbackForm/Steps/Commons.jsx | 10 -------
 .../FeedbackForm/Steps/Commons/FormHeader.jsx | 14 +++++++++
 src/components/index.js                       | 29 ++++++++++++++++---
 src/components/manage/index.js                | 23 ++++++++++++---
 src/components/widgets/index.js               | 15 ++++++++--
 src/index.js                                  |  1 +
 6 files changed, 72 insertions(+), 20 deletions(-)
 delete mode 100644 src/components/FeedbackForm/Steps/Commons.jsx
 create mode 100644 src/components/FeedbackForm/Steps/Commons/FormHeader.jsx

diff --git a/src/components/FeedbackForm/Steps/Commons.jsx b/src/components/FeedbackForm/Steps/Commons.jsx
deleted file mode 100644
index ff956ee..0000000
--- a/src/components/FeedbackForm/Steps/Commons.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-
-export const FormHeader = ({ title, step, totalSteps, className }) => {
-  return (
-    <div className={className}>
-      <h6>{title}</h6>
-      <div>{`${step}/${totalSteps}`}</div>
-    </div>
-  );
-};
diff --git a/src/components/FeedbackForm/Steps/Commons/FormHeader.jsx b/src/components/FeedbackForm/Steps/Commons/FormHeader.jsx
new file mode 100644
index 0000000..9733107
--- /dev/null
+++ b/src/components/FeedbackForm/Steps/Commons/FormHeader.jsx
@@ -0,0 +1,14 @@
+import React, { useState } from 'react';
+import { TextArea, Form } from 'semantic-ui-react';
+import { defineMessages } from 'react-intl';
+
+const FormHeader = ({ title, step, totalSteps, className }) => {
+  return (
+    <div className={className}>
+      <h6>{title}</h6>
+      <div>{`${step}/${totalSteps}`}</div>
+    </div>
+  );
+};
+
+export default FormHeader;
diff --git a/src/components/index.js b/src/components/index.js
index 81813a9..5fa6190 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,4 +1,25 @@
-export { FormHeader } from './FeedbackForm/Steps/Commons';
-export FeedbackForm from './FeedbackForm/FeedbackForm';
-export AnswersStep from './FeedbackForm/Steps/AnswersStep';
-export CommentsStep from './FeedbackForm/Steps/CommentsStep';
+import loadable from '@loadable/component';
+
+/*--------------------------------
+--- BUNDLE VoltoFeedbackView ---
+---------------------------------*/
+export const FormHeader = loadable(() =>
+  import(
+    /* webpackChunkName: "VoltoFeedbackView" */ './FeedbackForm/Steps/Commons/FormHeader'
+  ),
+);
+export const FeedbackForm = loadable(() =>
+  import(
+    /* webpackChunkName: "VoltoFeedbackView" */ './FeedbackForm/FeedbackForm'
+  ),
+);
+export const AnswersStep = loadable(() =>
+  import(
+    /* webpackChunkName: "VoltoFeedbackView" */ './FeedbackForm/Steps/AnswersStep'
+  ),
+);
+export const CommentsStep = loadable(() =>
+  import(
+    /* webpackChunkName: "VoltoFeedbackView" */ './FeedbackForm/Steps/CommentsStep'
+  ),
+);
diff --git a/src/components/manage/index.js b/src/components/manage/index.js
index a27057c..07b79d5 100644
--- a/src/components/manage/index.js
+++ b/src/components/manage/index.js
@@ -1,4 +1,19 @@
-export VFPanel from './VFPanel/VFPanel';
-export VFPanelMenu from './VFPanel/VFPanelMenu';
-export FeedbackComments from './VFPanel/FeedbackComments';
-export VFToolbar from './VFToolbar';
+import loadable from '@loadable/component';
+
+/*--------------------------------
+--- BUNDLE VoltoFeedbackManage ---
+---------------------------------*/
+export const VFPanel = loadable(() =>
+  import(/* webpackChunkName: "VoltoFeedbackManage" */ './VFPanel/VFPanel'),
+);
+export const VFPanelMenu = loadable(() =>
+  import(/* webpackChunkName: "VoltoFeedbackManage" */ './VFPanel/VFPanelMenu'),
+);
+export const FeedbackComments = loadable(() =>
+  import(
+    /* webpackChunkName: "VoltoFeedbackManage" */ './VFPanel/FeedbackComments'
+  ),
+);
+export const VFToolbar = loadable(() =>
+  import(/* webpackChunkName: "VoltoFeedbackManage" */ './VFToolbar'),
+);
diff --git a/src/components/widgets/index.js b/src/components/widgets/index.js
index fda43c9..2b66cd7 100644
--- a/src/components/widgets/index.js
+++ b/src/components/widgets/index.js
@@ -1,2 +1,13 @@
-export HoneypotWidget from './HoneypotWidget/HoneypotWidget';
-export GoogleReCaptchaWidget from './GoogleReCaptchaWidget';
+import loadable from '@loadable/component';
+
+/*--------------------------------
+--- BOUNDLE VoltoFeedbackView ---
+---------------------------------*/
+export const HoneypotWidget = loadable(() =>
+  import(
+    /* webpackChunkName: "VoltoFeedbackView" */ './HoneypotWidget/HoneypotWidget'
+  ),
+);
+export const GoogleReCaptchaWidget = loadable(() =>
+  import(/* webpackChunkName: "VoltoFeedbackView" */ './GoogleReCaptchaWidget'),
+);
diff --git a/src/index.js b/src/index.js
index 5a0fec0..406257d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -34,6 +34,7 @@ export {
   generateFeedbackCommentUUID,
   getNumberOfSteps,
 } from 'volto-feedback/helpers';
+
 export {
   GoogleReCaptchaWidget,
   HoneypotWidget,