Использовал React Suspense для показа прелоадера, но он показывает его только на начальном этапе загрузки приложения. То есть прелоадер пропадает, а приложение полностью не загрузилось, шрифты начинают подгружаться, картинки и тд. Как сделать так чтобы Preloader показывался до тех пор пока полностью не загрузятся шрифты, картинки и прочее. Может есть какая нибудь библиотека или способ, подскажите пожалуйста.

может тут посмотрите, может поможет https://dev.to/jdmg94/declarative-resource-loading-with-react-51pc

Суспенс у меня не взлетел - есть библиотека. Я ее применял. Как название не помню - сейчас не у компа

Напишите пожалуйста название как сможете

Ок

это ?https://github.com/jamiebuilds/react-loadable

Всем привет, у меня не получается деплойнуть мое приложение на github pages. Я как бы все загрузил все работает но выбивает error 404

я его сам прописал если роут не совпадет

что я сделал не так?

надеюсь меня кто-то понял.

на гитхабе только хеш роутеры работают, мб в этом дело

Добрейшего, подскажите, в чем может быть проблема. Не вызывается обработчик onFocus события картинки, картинка с помощью styled-components реализована.
Вот картинка.

<SmallImage
        active={true}
        onFocus={handleFocusImage}
        src="https://picsum.photos/200/200"
      />

Вот обработчик

const handleFocusImage = (event) => {
    console.log("123");
  };

Сам стиль картинки, если имеет значение

export const SmallImage = styled.div`
  cursor: pointer;
  margin: 4px 0;
  width: 100%;
  height: 100%;
  background-image: ${({ active }) =>
      !active &&
      `linear-gradient(rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.70)),`}
    url(${(props) => props.src});
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #f3f3f3;
`;

Картинка находится внутри div с absolute позиционированием, который в свою очередь обернут во Wrapper.

onFocus работает вроде только для
> Применяется к тегам
<button>, <input>, <label>, <select>, <textarea>

<SmallImage
        active={true}
        onFocus={handleFocusImage}
        src="https://picsum.photos/200/200"
      />

const handleFocusImage = (event) => {
    console.log("123");
  };

export const SmallImage = styled.div`
  cursor: pointer;
  margin: 4px 0;
  width: 100%;
  height: 100%;
  background-image: ${({ active }) =>
      !active &&
      `linear-gradient(rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.70)),`}
    url(${(props) => props.src});
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #f3f3f3;
`;

попробуй событие onMouseOver/onMouseEnter

Благодарю

Всем привет. У меня есть компонент - выдвижное боковое меню. Для его работы нужно указать container - дом элемент, в моем случае это компонент Layout. Как лучше сделать? Пробрасывать ref в context или можно как то чистым js через getElement?

насколько я знаю getElement делать нельзя