Lazy Popover
Lazy loading Popover using React.lazy and React.useTransition to avoid downloading additional code until the user interacts with the button.
import "./style.css";
import { lazy, useState, useTransition } from "react";
import * as Ariakit from "@ariakit/react";
import { Spinner } from "./spinner.jsx";
import { usePerceptibleValue } from "./use-perceptible-value.js";
const Popover = lazy(() => import("./popover.js"));
export default function Example() {
const [open, setOpen] = useState(false);
const [isPending, startTransition] = useTransition();
// Wait for 150ms before showing the spinner. Once the spinner is shown, it
// should be visible for enough time to avoid flickering.
const loading = usePerceptibleValue(isPending, {
delay: isPending ? 150 : 0,
});
return (
if (open) {
return startTransition(() => setOpen(open));
}
setOpen(open);
}}
>
Accept invite
{open && (
Team meeting
We are going to discuss what we have achieved on the project.
<div>
<p>12 Jan 2022 18:00 to 19:00</p>
<p>Alert 10 minutes before start</p>
</div>
)}
);
}
Controlling the popover state
You can control the open state of the popover by passing the open and setOpen props to the PopoverProvider component:
const [open, setOpen] = React.useState(false);
Learn more on the Component stores guide.
Follow updates
Join 1,000+ subscribers and receive monthly updates with the latest improvements on Examples.