Skip to main content

.flyyer-wait

To tell our rendering service to wait for a particular task you can use .flyyer-wait CSS class on your HTML and our service will wait until that class disappears.

This is particularly useful for

import React from "react";
import { useSmartcrop, SmartcropStatus } from "use-smartcrop";

export default function Template({ width, height }) {
// TODO: get this from variables.
const src = "https://images.pexels.com/photos/1496286/pexels-photo-1496286.jpeg";

// Width and height are required.
const [cropped, error] = useSmartcrop({ src }, { width, height, minScale: 1.0 });
if (error) {
console.error(error);
}

return (
<div className={!cropped && "flyyer-wait"}>
{cropped && <img src={cropped} />}
</div>
);
}

We recommend the module clsx to toggle classes:

import clsx from "clsx";

// ...

return (
<div className={clsx({ "flyyer-wait": !cropped })}>
{cropped && <img src={cropped} />}
</div>
);