Async loading of TwitterPicker (#246)
This commit is contained in:
parent
2d66616e3f
commit
2f9aa0e3ca
@ -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"
|
||||
|
Loading…
x
Reference in New Issue
Block a user