Как обойти ошибку react-progress-2?

Question

[ParaBellum577]

всем привет!
Столкнулся с проблемой: поставил в свое приложение лоадер в шапке страницы "react-progress-2"
Вот такого плана.
Все работает на одной странице, но если я перехожу с одной страницы на другую, то получаю ошибку:

Причем не важно, вызываю я эту функцию в дидмаунте или по клику или другому событию, результат одинаковый.

import Progress from "react-progress-2";
import "react-progress-2/main.css"

loadPage = () => {
  Progress.show();
  setTimeout(() => Progress.hideAll(),800);
}

<Progress.Component/>

Работает он очень просто. Но я так понимаю, что это синглтон компонент и он просто не хочет рабоать на енскольких страницах, как это обойти? Либо может кто-то подскажет другой лоадер? NProgress не получается настроить. Если что, приложение на Gatsby JS

Answer 1

[Антон Спирин]

1. Вы можете использовать только один компонент на странице, так как ссылка на инстанс пишется в прототип.
2. Причина ошибки в том, что при переходе вы не чистите таймаут. Сначала удаляется ссылка на инстанс, затем срабатывает ваш таймаут и происходит обращение к методу несуществующей ссылки. Чтобы избавиться от ошибки, достаточно чистить таймаут в componentWillUnmount:

loadPage = () => {
  Progress.show();
  this._hideAllTimeout = setTimeout(() => Progress.hideAll(),800);
}

componentWillUnmount() {
  clearTimeout(this._hideAllTimeout);
}

Comments

[ParaBellum577]

К сожалению это не срабатывает. Даже если я вызываю
Progress.hide()
Без таймаута, ошибка все равно будет.