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 ? (
- setActive(false)}>
- {
- onChange(changedColor.hex);
- }}
- />
-
- ) : null}
+
+ {isActive ? (
+ setActive(false)}>
+ {
+ onChange(changedColor.hex);
+ }}
+ />
+
+ ) : null}
+