Notiflix.Notify

Notiflix — набор UI-модулей на чистом JS. Для тостов нужен модуль Notify, стили он добавляет сам.

Подключение и FetchIt.Message

Библиотека подключается как ES-модуль. Модули выполняются отложенно, как defer, поэтому FetchIt в них уже доступен и DOMContentLoaded не нужен:

<script type="module">
  import Notiflix from 'https://cdn.jsdelivr.net/npm/notiflix@3/+esm'

  Notiflix.Notify.init({
    position: 'right-top',
    timeout: 5000,
    clickToClose: true,
    pauseOnHover: true,
  })

  const show = (message, display) => {
    const text = FetchIt.sanitizeHTML(message).trim()
    if (text) {
      display(text)
    }
  }

  FetchIt.Message = {
    success: (message) => show(message, (text) => Notiflix.Notify.success(text)),
    error: (message) => show(message, (text) => Notiflix.Notify.failure(text)),
  }
</script>

Модуль должен стоять в HTML после скрипта FetchIt — плагин подключает его в <head>, так что достаточно разместить модуль ниже, например перед </body>.

Почему текст проходит через sanitizeHTML и зачем проверка на пустую строку — в общем разделе.

Индикатор загрузки

У Notiflix есть и модуль Loading — затемнение страницы со спиннером на время отправки. Показывайте его по fetchit:before, а убирайте по fetchit:success и fetchit:error:

// В том же модуле, после import
document.addEventListener('fetchit:before', (e) => {
  if (!e.defaultPrevented) {
    Notiflix.Loading.circle()
  }
})

for (const name of ['fetchit:success', 'fetchit:error']) {
  document.addEventListener(name, () => Notiflix.Loading.remove())
}

Notiflix из import виден только внутри модуля, поэтому код идёт туда же. Подключайте модуль после клиентской валидации: если она отменит отправку, e.defaultPrevented уже будет true. Подробнее — в примере индикатора отправки.