.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

• use-smartcrop
• use-googlefonts

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>);