From 2f9aa0e3ca13b9e5d1ecd8079aad996fd612c18d Mon Sep 17 00:00:00 2001
From: Timur Khazamov <bboytx@gmail.com>
Date: Tue, 7 Jan 2020 23:37:22 +0500
Subject: [PATCH] Async loading of TwitterPicker (#246)

---
 src/components/ColorPicker.tsx | 59 +++++++++++++++++++---------------
 1 file changed, 33 insertions(+), 26 deletions(-)

diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx
index 0431b7e7..647e3f76 100644
--- a/src/components/ColorPicker.tsx
+++ b/src/components/ColorPicker.tsx
@@ -1,7 +1,12 @@
-import React from "react";
-import { TwitterPicker } from "react-color";
+import React, { lazy } from "react";
 import { Popover } from "./Popover";
 
+const TwitterPicker = lazy(() =>
+  import(
+    /* webpackPrefetch: true */ "react-color/lib/components/twitter/Twitter"
+  )
+);
+
 export function ColorPicker({
   color,
   onChange
@@ -17,30 +22,32 @@ export function ColorPicker({
         style={color ? { backgroundColor: color } : undefined}
         onClick={() => setActive(!isActive)}
       />
-      {isActive ? (
-        <Popover onCloseRequest={() => setActive(false)}>
-          <TwitterPicker
-            colors={[
-              "#000000",
-              "#ABB8C3",
-              "#FFFFFF",
-              "#FF6900",
-              "#FCB900",
-              "#00D084",
-              "#8ED1FC",
-              "#0693E3",
-              "#EB144C",
-              "#F78DA7",
-              "#9900EF"
-            ]}
-            width="205px"
-            color={color || undefined}
-            onChange={changedColor => {
-              onChange(changedColor.hex);
-            }}
-          />
-        </Popover>
-      ) : null}
+      <React.Suspense fallback="">
+        {isActive ? (
+          <Popover onCloseRequest={() => setActive(false)}>
+            <TwitterPicker
+              colors={[
+                "#000000",
+                "#ABB8C3",
+                "#FFFFFF",
+                "#FF6900",
+                "#FCB900",
+                "#00D084",
+                "#8ED1FC",
+                "#0693E3",
+                "#EB144C",
+                "#F78DA7",
+                "#9900EF"
+              ]}
+              width="205px"
+              color={color || undefined}
+              onChange={changedColor => {
+                onChange(changedColor.hex);
+              }}
+            />
+          </Popover>
+        ) : null}
+      </React.Suspense>
       <input
         type="text"
         className="swatch-input"