Async loading of TwitterPicker (#246)

This commit is contained in:
Timur Khazamov 2020-01-07 23:37:22 +05:00 committed by Christopher Chedeau
parent 2d66616e3f
commit 2f9aa0e3ca

View File

@ -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,6 +22,7 @@ export function ColorPicker({
style={color ? { backgroundColor: color } : undefined}
onClick={() => setActive(!isActive)}
/>
<React.Suspense fallback="">
{isActive ? (
<Popover onCloseRequest={() => setActive(false)}>
<TwitterPicker
@ -41,6 +47,7 @@ export function ColorPicker({
/>
</Popover>
) : null}
</React.Suspense>
<input
type="text"
className="swatch-input"