Компонент Spinner в WordPress служит для информирования пользователя о том, что его запрос обрабатывается. Это индикатор загрузки, который помогает создать удобный пользовательский интерфейс, показывая процесс выполнения действия.
Использование компонента Spinner
Компонент Spinner прост в использовании и часто применяется в случаях, когда необходимы визуальные индикаторы обработки данных, например, при загрузке страницы или отправке формы.
Пример базового использования
Чтобы добавить Spinner, достаточно импортировать компонент и отобразить его в нужном месте в интерфейсе.
import { Spinner } from '@wordpress/components';
function LoadingIndicator() {
return <Spinner />;
}
Лучшие практики при использовании Spinner
При добавлении Spinner важно учитывать следующие аспекты:
- Обратная связь: Компонент должен ясно показывать пользователю, что его запрос обрабатывается.
- Временные рамки: Индикатор не должен оставаться на экране слишком долго. Если процесс требует значительного времени, лучше дополнительно уведомить пользователя об этом.
- Контекстное использование:
Spinnerдолжен быть размещен в области, связанной с выполняемым действием, чтобы пользователи знали, что именно происходит.
Пример со временем ожидания и скрытием компонента
Часто Spinner используется с задержкой, чтобы показать индикатор только в том случае, если загрузка занимает больше определенного времени.
import { useEffect, useState } from 'react';
import { Spinner } from '@wordpress/components';
function DelayedSpinner() {
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const timer = setTimeout(() => setIsLoading(true), 500); // Показать Spinner через 500 мс
return () => clearTimeout(timer); // Очистить таймер после завершения
}, []);
return isLoading ? <Spinner /> : <p>Загрузка данных...</p>;
}
В этом примере Spinner отображается только после 500 миллисекунд ожидания, если загрузка данных продолжается.
Пример с сообщением для пользователей
Добавление Spinner вместе с сообщением может улучшить восприятие пользователем текущего состояния выполнения.
import { useEffect, useState } from 'react';
import { Spinner } from '@wordpress/components';
function SpinnerWithMessage() {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const timer = setTimeout(() => setIsLoading(false), 2000); // Загрузка данных завершится через 2 секунды
return () => clearTimeout(timer);
}, []);
return (
<div>
{isLoading ? (
<div>
<Spinner />
<p>Пожалуйста, подождите. Данные обрабатываются...</p>
</div>
) : (
<p>Данные успешно загружены!</p>
)}
</div>
);
}
В этом примере Spinner отображается вместе с сообщением, которое поясняет, что данные находятся в процессе загрузки. После завершения загрузки сообщение изменяется на успешный результат.
Пример Spinner в кнопке
Spinner также часто используется в элементах управления, таких как кнопки, чтобы показать, что действие выполняется.
import { useState } from 'react';
import { Button, Spinner } from '@wordpress/components';
function LoadingButton() {
const [isProcessing, setIsProcessing] = useState(false);
const handleClick = () => {
setIsProcessing(true);
setTimeout(() => setIsProcessing(false), 1500); // Симулируем загрузку на 1.5 секунды
};
return (
<Button onClick={handleClick} isBusy={isProcessing} disabled={isProcessing}>
{isProcessing ? <Spinner /> : 'Сохранить изменения'}
</Button>
);
}
Здесь Spinner появляется внутри кнопки после ее нажатия, сигнализируя о процессе выполнения.
Заключение
Компонент Spinner является простым, но эффективным способом улучшить пользовательский интерфейс, показывая пользователям, что их действия обрабатываются. Этот индикатор загрузки можно применять в различных ситуациях, от глобальной загрузки страницы до более конкретных сценариев, таких как отправка формы или сохранение изменений.