React

Как сделать loader с задержкой, чтобы не мигал?

Иногда при загрузке данных хочется показать спиннер, но только если это занимает больше, скажем, 300мс. Это позволяет избежать "мигающего" лоадера при быстрой загрузке. Я часто использую этот приём, особенно при загрузке модалок или переключении вкладок.

Вот простая реализация на React:

import { useState, useEffect } from "react";

function useDelayedLoader(isLoading: boolean, delay = 300) {
  const [showLoader, setShowLoader] = useState(false);

  useEffect(() => {
    let timeout: ReturnType<typeof setTimeout>;

    if (isLoading) {
      timeout = setTimeout(() => setShowLoader(true), delay);
    } else {
      setShowLoader(false);
    }

    return () => clearTimeout(timeout);
  }, [isLoading, delay]);

  return showLoader;
}

Использование:

const isLoading = ...; // например, из useQuery или useState
const showLoader = useDelayedLoader(isLoading);

return (
  <>
    {showLoader && <Spinner />}
    {!isLoading && <Content />}
  </>
);

⚡️ Профит — спиннер появляется только если загрузка реально долгая. Пользователь не чувствует "дёргания" интерфейса. Маленький UX-трюк, но эффект — огромный.


✍️ @React_lib

👍14

www.tgoop.com/React_lib/664

1.49K viewsMar 30 at 06:02

Как сделать loader с задержкой, чтобы не мигал?

Иногда при загрузке данных хочется показать спиннер, но только если это занимает больше, скажем, 300мс. Это позволяет избежать "мигающего" лоадера при быстрой загрузке. Я часто использую этот приём, особенно при загрузке модалок или переключении вкладок.

Вот простая реализация на React:

import { useState, useEffect } from "react";

function useDelayedLoader(isLoading: boolean, delay = 300) {
  const [showLoader, setShowLoader] = useState(false);

  useEffect(() => {
    let timeout: ReturnType<typeof setTimeout>;

    if (isLoading) {
      timeout = setTimeout(() => setShowLoader(true), delay);
    } else {
      setShowLoader(false);
    }

    return () => clearTimeout(timeout);
  }, [isLoading, delay]);

  return showLoader;
}

const isLoading = ...; // например, из useQuery или useState
const showLoader = useDelayedLoader(isLoading);

return (
  <>
    {showLoader && <Spinner />}
    {!isLoading && <Content />}
  </>
);

BY React