Reduces the bundle size of attachments preview.

.gitignore

@@ -10,6 +10,8 @@
 
 # production
 /build
+/dist/*.js
+/dist/*.map
 /dist/editor-output.js
 /dist/editor-output.js.map
 /dist/codeBlockHighlight.js.map
@@ -26,8 +28,6 @@ yarn-debug.log*
 yarn-error.log*
 
 /editor-content.js
-/index.js
-/index.cjs.js
-/index.*.map
+/index.*
 /formik.js
 storybook-static

package.json

@@ -14,7 +14,8 @@
   "files": [
     "index.*",
     "types.d.ts",
-    "src/translations"
+    "src/translations",
+    "dist"
   ],
   "author": "BigBinary",
   "license": "MIT",

rollup.config.js

@@ -11,6 +11,7 @@ import { mergeDeepLeft } from "ramda";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import styles from "rollup-plugin-styles";
 import copy from "rollup-plugin-copy";
+import cleaner from "rollup-plugin-cleaner";
 
 import packageJson from "./package.json";
 
@@ -22,6 +23,8 @@ const peerDependencies = Object.keys(packageJson.peerDependencies);
 
 const formats = ["esm", "cjs"];
 
+const cleanerTargets = ["./dist/", "index.cjs.js", "index.js", "index.cjs.js.map", "index.js.map"];
+
 const plugins = [
   peerDepsExternal(),
   alias({ entries: aliasEntries }),
@@ -54,6 +57,7 @@ const config = args => {
       assetFileNames: "[name][extname]",
       dir: path.join(destination),
       entryFileNames: format === "esm" ? "index.js" : "index.cjs.js",
+      chunkFileNames: format === "esm" ? "dist/chunk-[hash].js" : "dist/chunk-[hash].cjs.js",
       format,
       name: "NeetoEditor",
       sourcemap: true,
@@ -64,7 +68,9 @@ const config = args => {
       input: "./src/index.js",
       external: peerDependencies,
       output,
-      plugins: [ ...plugins,
+      plugins: [
+        cleaner({ targets: cleanerTargets }),
+        ...plugins,
         args.app && copy({
           targets: [
             { src: "package.json", dest: destination },

src/components/Attachments/Attachment.jsx

@@ -6,6 +6,7 @@ import { MenuVertical, Close } from "neetoicons";
 import {
   Dropdown,
   Input,
+  Spinner,
   Toastr,
   Tooltip,
   Typography,
@@ -29,6 +30,7 @@ const Attachment = ({
   disabled,
   onChange,
   setSelectedAttachment,
+  isLoading,
 }) => {
   const { t } = useTranslation();
 
@@ -154,6 +156,7 @@ const Attachment = ({
               <Tooltip content={attachment.filename} position="top">
                 <Typography style="body2">{attachment.filename}</Typography>
               </Tooltip>
+              {isLoading && <Spinner className="attachment-button-loader" />}
             </div>
             <Tooltip
               content={t("neetoEditor.attachments.actionsBlocked")}

src/components/Attachments/Preview.jsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 
 import { findIndexBy, truncate } from "neetocist";
 import { Left, Right } from "neetoicons";
@@ -17,6 +17,7 @@ const Preview = ({
   attachments,
   selectedAttachment,
   setSelectedAttachment,
+  setDidFetchPreviewBundle,
 }) => {
   const { t } = useTranslation();
   const downloadRef = useRef(null);
@@ -52,6 +53,10 @@ const Preview = ({
     }
   };
 
+  useEffect(() => {
+    setDidFetchPreviewBundle(true);
+  }, []);
+
   const handleDownload = () => downloadFile(url, filename);
 
   const setPreview = () => {

src/components/Attachments/index.jsx

@@ -1,8 +1,15 @@
-import React, { useRef, useEffect, useState, useImperativeHandle } from "react";
+import React, {
+  useRef,
+  useEffect,
+  useState,
+  useImperativeHandle,
+  lazy,
+  Suspense,
+} from "react";
 
 import DropTarget from "@uppy/drop-target";
 import classnames from "classnames";
-import { removeById, noop } from "neetocist";
+import { isPresent, removeById, noop } from "neetocist";
 import { Button, Toastr } from "neetoui";
 import { concat, isEmpty, isNil } from "ramda";
 import { useTranslation } from "react-i18next";
@@ -11,9 +18,10 @@ import useUppyUploader from "hooks/useUppyUploader";
 
 import Attachment from "./Attachment";
 import AttachmentProgress from "./AttachmentProgress";
-import Preview from "./Preview";
 import { buildUppyConfig, handleDrop, selectFiles } from "./utils";
 
+const Preview = lazy(() => import("./Preview"));
+
 const Attachments = (
   {
     attachments = [],
@@ -31,6 +39,7 @@ const Attachments = (
 
   const [pendingAttachments, setPendingAttachments] = useState([]);
   const [selectedAttachment, setSelectedAttachment] = useState({});
+  const [didFetchPreviewBundle, setDidFetchPreviewBundle] = useState(false);
 
   const attachmentInputRef = useRef(null);
 
@@ -168,6 +177,10 @@ const Attachments = (
               setSelectedAttachment,
             }}
             key={attachment.signedId}
+            isLoading={
+              !didFetchPreviewBundle &&
+              selectedAttachment.url === attachment.url
+            }
           />
         ))}
         {pendingAttachments.map(attachment => (
@@ -197,10 +210,19 @@ const Attachments = (
           onChange={handleAddFile}
           onClick={handleFileInputClick}
         />
-        <Preview
-          {...{ attachments, selectedAttachment, setSelectedAttachment }}
-          onClose={() => setSelectedAttachment({})}
-        />
+        <Suspense fallback={<span />}>
+          {isPresent(selectedAttachment) && (
+            <Preview
+              {...{
+                attachments,
+                selectedAttachment,
+                setDidFetchPreviewBundle,
+                setSelectedAttachment,
+              }}
+              onClose={() => setSelectedAttachment({})}
+            />
+          )}
+        </Suspense>
       </div>
     </div>
   );

src/styles/components/_attachments.scss

@@ -156,6 +156,11 @@
       }
     }
   }
+
+  .attachment-button-loader {
+    scale: 0.5;
+    width: 26px !important;
+  }
 }
 
 .ne-attachments--integrated {