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