Унифицировать отображение загрузки на всех экранах
All checks were successful
Build and Push Docker Image / build-and-push (push) Successful in 45s

- Добавлен единый стиль загрузки с лоадером и текстом 'Загрузка...'
- Центрирование по вертикали с учетом наличия табов
- Обновлены все 10 экранов: CurrentWeek, TestConfigSelection, TaskList, FullStatistics, WordList, TaskForm, TestWords, TodoistIntegration, TelegramIntegration, ProjectPriorityManager
- Версия: 3.8.8
This commit is contained in:
poignatov
2026-01-11 15:32:31 +03:00
parent 64d192796c
commit 08f81887b0
12 changed files with 52 additions and 16 deletions

View File

@@ -1 +1 @@
3.8.7 3.8.8

View File

@@ -1,6 +1,6 @@
{ {
"name": "play-life-web", "name": "play-life-web",
"version": "3.8.7", "version": "3.8.8",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",

View File

@@ -8,10 +8,10 @@ function CurrentWeek({ onProjectClick, data, loading, error, onRetry, allProject
// Показываем loading только если данных нет и идет загрузка // Показываем loading только если данных нет и идет загрузка
if (loading && (!data || projectsData.length === 0)) { if (loading && (!data || projectsData.length === 0)) {
return ( return (
<div className="flex justify-center items-center py-16"> <div className="fixed inset-0 bottom-20 flex justify-center items-center">
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<div className="w-12 h-12 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin mb-4"></div> <div className="w-12 h-12 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin mb-4"></div>
<div className="text-gray-600 font-medium">Загрузка данных...</div> <div className="text-gray-600 font-medium">Загрузка...</div>
</div> </div>
</div> </div>
) )

View File

@@ -119,10 +119,10 @@ function FullStatistics({ selectedProject, onClearSelection, data, loading, erro
// Показываем loading только если данных нет и идет загрузка // Показываем loading только если данных нет и идет загрузка
if (loading && !chartData) { if (loading && !chartData) {
return ( return (
<div className="flex justify-center items-center py-16"> <div className="fixed inset-0 flex justify-center items-center">
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<div className="w-12 h-12 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin mb-4"></div> <div className="w-12 h-12 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin mb-4"></div>
<div className="text-gray-600 font-medium">Загрузка данных...</div> <div className="text-gray-600 font-medium">Загрузка...</div>
</div> </div>
</div> </div>
) )

View File

@@ -891,8 +891,11 @@ function ProjectPriorityManager({ allProjectsData, currentWeekData, shouldLoad,
)} )}
{projectsLoading && (!maxPriority.length && !mediumPriority.length && !lowPriority.length) ? ( {projectsLoading && (!maxPriority.length && !mediumPriority.length && !lowPriority.length) ? (
<div className="rounded-lg border border-gray-200 bg-white p-4 text-center text-gray-600 shadow-sm flex-shrink-0"> <div className="fixed inset-0 flex justify-center items-center">
Загружаем проекты... <div className="flex flex-col items-center">
<div className="w-12 h-12 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin mb-4"></div>
<div className="text-gray-600 font-medium">Загрузка...</div>
</div>
</div> </div>
) : ( ) : (
<DndContext <DndContext

View File

@@ -575,7 +575,12 @@ function TaskForm({ onNavigate, taskId }) {
if (loadingTask) { if (loadingTask) {
return ( return (
<div className="task-form"> <div className="task-form">
<div className="loading">Загрузка...</div> <div className="fixed inset-0 flex justify-center items-center">
<div className="flex flex-col items-center">
<div className="w-12 h-12 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin mb-4"></div>
<div className="text-gray-600 font-medium">Загрузка...</div>
</div>
</div>
</div> </div>
) )
} }

View File

@@ -640,7 +640,12 @@ function TaskList({ onNavigate, data, loading, backgroundLoading, onRefresh }) {
if (loading && !backgroundLoading && !hasData) { if (loading && !backgroundLoading && !hasData) {
return ( return (
<div className="task-list"> <div className="task-list">
<div className="loading">Загрузка...</div> <div className="fixed inset-0 bottom-20 flex justify-center items-center">
<div className="flex flex-col items-center">
<div className="w-12 h-12 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin mb-4"></div>
<div className="text-gray-600 font-medium">Загрузка...</div>
</div>
</div>
</div> </div>
) )
} }

View File

@@ -41,8 +41,11 @@ function TelegramIntegration({ onNavigate }) {
if (loading) { if (loading) {
return ( return (
<div className="p-4 md:p-6"> <div className="fixed inset-0 flex justify-center items-center">
<div className="text-gray-500">Загрузка...</div> <div className="flex flex-col items-center">
<div className="w-12 h-12 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin mb-4"></div>
<div className="text-gray-600 font-medium">Загрузка...</div>
</div>
</div> </div>
) )
} }

View File

@@ -154,7 +154,12 @@ function TestConfigSelection({ onNavigate, refreshTrigger = 0 }) {
if (shouldShowLoading) { if (shouldShowLoading) {
return ( return (
<div className="config-selection"> <div className="config-selection">
<div className="loading">Загрузка...</div> <div className="fixed inset-0 bottom-20 flex justify-center items-center">
<div className="flex flex-col items-center">
<div className="w-12 h-12 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin mb-4"></div>
<div className="text-gray-600 font-medium">Загрузка...</div>
</div>
</div>
</div> </div>
) )
} }

View File

@@ -617,7 +617,12 @@ function TestWords({ onNavigate, wordCount: initialWordCount, configId: initialC
) : ( ) : (
<div className="test-screen"> <div className="test-screen">
{loading && ( {loading && (
<div className="test-loading">Загрузка слов...</div> <div className="fixed inset-0 flex justify-center items-center">
<div className="flex flex-col items-center">
<div className="w-12 h-12 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin mb-4"></div>
<div className="text-gray-600 font-medium">Загрузка...</div>
</div>
</div>
)} )}
{error && ( {error && (
<div className="test-error">{error}</div> <div className="test-error">{error}</div>

View File

@@ -121,7 +121,12 @@ function TodoistIntegration({ onNavigate }) {
)} )}
{loading ? ( {loading ? (
<div className="text-gray-500">Загрузка...</div> <div className="fixed inset-0 flex justify-center items-center">
<div className="flex flex-col items-center">
<div className="w-12 h-12 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin mb-4"></div>
<div className="text-gray-600 font-medium">Загрузка...</div>
</div>
</div>
) : connected ? ( ) : connected ? (
<div> <div>
<div className="bg-white rounded-lg shadow-md p-6 mb-6"> <div className="bg-white rounded-lg shadow-md p-6 mb-6">

View File

@@ -163,7 +163,12 @@ function WordList({ onNavigate, dictionaryId, isNewDictionary, refreshTrigger =
if (loading) { if (loading) {
return ( return (
<div className="word-list"> <div className="word-list">
<div className="loading">Загрузка...</div> <div className="fixed inset-0 flex justify-center items-center">
<div className="flex flex-col items-center">
<div className="w-12 h-12 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin mb-4"></div>
<div className="text-gray-600 font-medium">Загрузка...</div>
</div>
</div>
</div> </div>
) )
} }