frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add animations

Browse Source
This commit is contained in:
smanylov
2026-04-09 16:11:57 +07:00
parent 1eff2d2c0a
commit 62cd597994
9 changed files with 209 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/actions/monitoringActions.ts
-1
View File
@@ -78,7 +78,6 @@ export async function fetchMonitoringStats(): Promise<MonitoringStats | null> {
if (response.ok) { if (response.ok) {
const parsed = await response.json(); const parsed = await response.json();
console.log(parsed);
if (parsed?.message_body?.searches_by_status) { if (parsed?.message_body?.searches_by_status) {
return parsed.message_body; return parsed.message_body;
} }
src/app/styles/animation.scss
+70
View File
@@ -0,0 +1,70 @@
@use './variable.scss' as v;
.loading-animation {
display: block;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.global-spinner {
display: block;
width: 24px;
height: 24px;
margin: 0 auto;
position: relative;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 4px solid #e5e7eb;
border-top: 4px solid #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
}
&.large {
width: 80px;
height: 80px;
&::before {
border: 10px solid #e5e7eb;
border-top: 10px solid #667eea;
}
}
}
}
.loading-placeholder {
display: flex;
align-items: center;
justify-content: center;
/* min-width: 80px;
min-height: 80px; */
&.start {
justify-content: start;
}
.loading-animation {
display: block;
text-align: center;
position: relative;
left: auto;
top: auto;
transform: none;
}
.global-spinner {
display: inline-block;
width: 24px;
height: 24px;
position: relative;
}
}
src/app/styles/global-styles.scss
+1
View File
@@ -6,6 +6,7 @@
@use './reports.scss'; @use './reports.scss';
@use './privacy-and-terms-pages.scss'; @use './privacy-and-terms-pages.scss';
@use './VKLogin.scss'; @use './VKLogin.scss';
@use './animation.scss';
.page-title { .page-title {
font-size: 30px; font-size: 30px;
src/app/styles/pages-styles.scss
-40
View File
@@ -4075,46 +4075,6 @@
} }
} }
.loading-animation {
display: block;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.global-spinner {
display: block;
width: 24px;
height: 24px;
margin: 0 auto;
position: relative;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 4px solid #e5e7eb;
border-top: 4px solid #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
}
&.large {
width: 80px;
height: 80px;
&::before {
border: 10px solid #e5e7eb;
border-top: 10px solid #667eea;
}
}
}
}
.modal-window-confirm-payment { .modal-window-confirm-payment {
background: white; background: white;
src/app/ui/dashboard/new/dashboard-user-stats.tsx
+64 -6
View File
@@ -10,7 +10,7 @@ import {IconDocument, IconSearch, IconWarning, IconGraph, IconDiscet, IconShield
export default function DashboardUserStats() { export default function DashboardUserStats() {
const t = useTranslations("Global"); const t = useTranslations("Global");
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo(); const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
const { data: violationStatistic } = useViolationStatistic(); const { data: violationStatistic, isLoading: violationStatisticLoading } = useViolationStatistic();
return ( return (
<> <>
@@ -22,7 +22,19 @@ export default function DashboardUserStats() {
<IconShield /> <IconShield />
</div> </div>
</div> </div>
<div className="stat-value">{filesInfo?.total.protected ? filesInfo?.total.protected : 0}</div> <div className="stat-value">
<div
className="loading-placeholder start"
>
{isLoading ? (
<div className="loading-animation">
<div className="global-spinner" />
</div>
) : (
filesInfo?.total.protected ? filesInfo?.total.protected : 0
)}
</div>
</div>
<div className="stat-label"> <div className="stat-label">
{t('files-under-protection')} {t('files-under-protection')}
</div> </div>
@@ -34,7 +46,19 @@ export default function DashboardUserStats() {
<IconSearch /> <IconSearch />
</div> </div>
</div> </div>
<div className="stat-value">{filesInfo?.total.check ? filesInfo?.total.check : 0}</div> <div className="stat-value">
<div
className="loading-placeholder start"
>
{isLoading ? (
<div className="loading-animation">
<div className="global-spinner" />
</div>
) : (
filesInfo?.total.check ? filesInfo?.total.check : 0
)}
</div>
</div>
<div className="stat-label"> <div className="stat-label">
{t('matches-found')} {t('matches-found')}
</div> </div>
@@ -46,7 +70,19 @@ export default function DashboardUserStats() {
<IconWarning /> <IconWarning />
</div> </div>
</div> </div>
<div className="stat-value">{violationStatistic?.total_violations ?? 0}</div> <div className="stat-value">
<div
className="loading-placeholder start"
>
{violationStatisticLoading ? (
<div className="loading-animation">
<div className="global-spinner" />
</div>
) : (
violationStatistic?.total_violations ?? 0
)}
</div>
</div>
<div className="stat-label"> <div className="stat-label">
{t('violations')} {t('violations')}
</div> </div>
@@ -59,7 +95,17 @@ export default function DashboardUserStats() {
</div> </div>
</div> </div>
<div className="stat-value"> <div className="stat-value">
{filesInfo?.total.size ? convertBytes(filesInfo?.total.size) : 0} <div
className="loading-placeholder start"
>
{isLoading ? (
<div className="loading-animation">
<div className="global-spinner" />
</div>
) : (
filesInfo?.total.size ? convertBytes(filesInfo?.total.size) : 0
)}
</div>
</div> </div>
<div className="stat-label"> <div className="stat-label">
{t('disk-space-used')} {t('disk-space-used')}
@@ -72,7 +118,19 @@ export default function DashboardUserStats() {
<IconDocument /> <IconDocument />
</div> </div>
</div> </div>
<div className="stat-value">{violationStatistic?.in_progress_violations ?? 0}</div> <div className="stat-value">
<div
className="loading-placeholder start"
>
{violationStatisticLoading ? (
<div className="loading-animation">
<div className="global-spinner" />
</div>
) : (
violationStatistic?.in_progress_violations ?? 0
)}
</div>
</div>
<div className="stat-label"> <div className="stat-label">
{t('violations-in-progress')} {t('violations-in-progress')}
</div> </div>
src/app/ui/my-content/new/my-content-stats-overview.tsx
+66 -12
View File
@@ -4,10 +4,12 @@ import { useTranslations } from 'next-intl';
import { convertBytes } from '@/app/lib/convertBytes'; import { convertBytes } from '@/app/lib/convertBytes';
import { IconDocument, IconShield, IconSearch, IconDiscet } from '@/app/ui/icons/icons'; import { IconDocument, IconShield, IconSearch, IconDiscet } from '@/app/ui/icons/icons';
import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo'; import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
import { useMonitoringStats } from '@/app/hooks/react-query/useMonitoringStats';
export default function MyContentStatsOverview() { export default function MyContentStatsOverview() {
const t = useTranslations('Global'); const t = useTranslations('Global');
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo(); const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
const { data: monitoringStats, isLoading: monitoringStatsLoading } = useMonitoringStats();
return ( return (
<div className="my-content-stats-overview"> <div className="my-content-stats-overview">
@@ -16,10 +18,23 @@ export default function MyContentStatsOverview() {
<div className="stat-icon"> <div className="stat-icon">
<IconDocument /> <IconDocument />
</div> </div>
{/* <div className="stat-trend">+0%</div> */}
</div> </div>
<div className="stat-value">{filesInfo?.total.quantity}</div> <div className="stat-value">
<div className="stat-label">Всего файлов</div> <div
className="loading-placeholder start"
>
{isLoading ? (
<div className="loading-animation">
<div className="global-spinner" />
</div>
) : (
filesInfo?.total.quantity
)}
</div>
</div>
<div className="stat-label">
{t('total-files')}
</div>
</div> </div>
<div className="stat-card protected" data-icon=""> <div className="stat-card protected" data-icon="">
@@ -27,10 +42,23 @@ export default function MyContentStatsOverview() {
<div className="stat-icon"> <div className="stat-icon">
<IconShield /> <IconShield />
</div> </div>
{/* <div className="stat-trend">+0%</div> */}
</div> </div>
<div className="stat-value">{filesInfo?.total.protected}</div> <div className="stat-value">
<div className="stat-label">Защищено файлов</div> <div
className="loading-placeholder start"
>
{isLoading ? (
<div className="loading-animation">
<div className="global-spinner" />
</div>
) : (
filesInfo?.total.protected
)}
</div>
</div>
<div className="stat-label">
{t('protected-files')}
</div>
</div> </div>
<div className="stat-card checks" data-icon=""> <div className="stat-card checks" data-icon="">
@@ -38,10 +66,23 @@ export default function MyContentStatsOverview() {
<div className="stat-icon"> <div className="stat-icon">
<IconSearch /> <IconSearch />
</div> </div>
{/* <div className="stat-trend">+0%</div> */}
</div> </div>
<div className="stat-value">0</div> <div className="stat-value">
<div className="stat-label">Проверок защиты</div> <div
className="loading-placeholder start"
>
{monitoringStatsLoading ? (
<div className="loading-animation">
<div className="global-spinner" />
</div>
) : (
monitoringStats?.total_searches ? monitoringStats?.total_searches : 0
)}
</div>
</div>
<div className="stat-label">
{t('checks')}
</div>
</div> </div>
<div className="stat-card storage" data-icon=""> <div className="stat-card storage" data-icon="">
@@ -49,10 +90,23 @@ export default function MyContentStatsOverview() {
<div className="stat-icon"> <div className="stat-icon">
<IconDiscet /> <IconDiscet />
</div> </div>
{/* <div className="stat-trend">+0%</div> */}
</div> </div>
<div className="stat-value">{convertBytes(filesInfo?.total.size ?? 0)}</div> <div className="stat-value">
<div className="stat-label">Хранилище</div> <div
className="loading-placeholder start"
>
{isLoading ? (
<div className="loading-animation">
<div className="global-spinner" />
</div>
) : (
convertBytes(filesInfo?.total.size ?? 0)
)}
</div>
</div>
<div className="stat-label">
{t('storage')}
</div>
</div> </div>
</div> </div>
) )
src/app/ui/reports/reports-info.tsx
-1
View File
@@ -42,7 +42,6 @@ export default function ReportsInfo() {
</div> </div>
</div> </div>
<div className="stat-value"> <div className="stat-value">
{/* {filesInfo?.total.check ? filesInfo?.total.check : 0} */}
{monitoringStats?.total_searches ? monitoringStats?.total_searches : 0} {monitoringStats?.total_searches ? monitoringStats?.total_searches : 0}
</div> </div>
<div className="stat-label">{t('monitoring')}</div> <div className="stat-label">{t('monitoring')}</div>
src/i18n/messages/en.json
+3 -1
View File
@@ -417,7 +417,9 @@
"fill-title-of-the-case": "Fill the case title", "fill-title-of-the-case": "Fill the case title",
"enter-the-amount-of-damage": "Enter the amount of damage", "enter-the-amount-of-damage": "Enter the amount of damage",
"download-all": "Download all", "download-all": "Download all",
"selected-files": "Selected files" "selected-files": "Selected files",
"protected-files": "Protected files",
"storage": "Storage"
}, },
"Login-register-form": { "Login-register-form": {
"and": "and", "and": "and",
src/i18n/messages/ru.json
+3 -1
View File
@@ -417,7 +417,9 @@
"fill-title-of-the-case": "Заполните название дела", "fill-title-of-the-case": "Заполните название дела",
"enter-the-amount-of-damage": "Введите сумму ущерба", "enter-the-amount-of-damage": "Введите сумму ущерба",
"download-all": "Скачать все", "download-all": "Скачать все",
"selected-files": "Выбранно файлов" "selected-files": "Выбранно файлов",
"protected-files": "Защищено файлов",
"storage": "Хранилище"
}, },
"Login-register-form": { "Login-register-form": {
"and": "и", "and": "и",