foo.ts

import { pipe } from 'fp-ts/function';
import * as NonEmptyArray from 'fp-ts/NonEmptyArray';
import * as O from 'fp-ts/Option';

const runMain = () => {
  require('./main');
};

const createTimeoutPromise = (timeout: number): Promise<void> =>
  new Promise<void>((resolve) =>
    setTimeout(() => {
      resolve();
    }, timeout),
  );

const checkIsHTMLImageElement = O.getRefinement((el) =>
  el instanceof HTMLImageElement ? O.some(el) : O.none,
);

const getImportantImages = () =>
  pipe(document.querySelectorAll(`img[data-important]`), Array.from).filter(
    checkIsHTMLImageElement,
  );

const TIMEOUT = 500;

pipe(
  getImportantImages(),
  NonEmptyArray.fromArray,
  O.fold(
    () => {
      console.log('No important images found.');
      runMain();
    },
    (imageEls) => {
      console.log(`Important images found. Waiting for decode with timeout of ${TIMEOUT}.`);
      const decode = Promise.all(imageEls.map((el) => el.decode()));
      Promise.race([decode, createTimeoutPromise(TIMEOUT)]).then(runMain);
    },
  ),
);