diff --git a/src/app/actions/monitoringActions.ts b/src/app/actions/monitoringActions.ts index 7b48667..04744fb 100644 --- a/src/app/actions/monitoringActions.ts +++ b/src/app/actions/monitoringActions.ts @@ -78,7 +78,6 @@ export async function fetchMonitoringStats(): Promise { if (response.ok) { const parsed = await response.json(); - console.log(parsed); if (parsed?.message_body?.searches_by_status) { return parsed.message_body; } diff --git a/src/app/styles/animation.scss b/src/app/styles/animation.scss new file mode 100644 index 0000000..dfa9943 --- /dev/null +++ b/src/app/styles/animation.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss index 5e4c05e..b731bcf 100644 --- a/src/app/styles/global-styles.scss +++ b/src/app/styles/global-styles.scss @@ -6,6 +6,7 @@ @use './reports.scss'; @use './privacy-and-terms-pages.scss'; @use './VKLogin.scss'; +@use './animation.scss'; .page-title { font-size: 30px; diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss index 750a2da..77f16d9 100644 --- a/src/app/styles/pages-styles.scss +++ b/src/app/styles/pages-styles.scss @@ -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 { background: white; diff --git a/src/app/ui/dashboard/new/dashboard-user-stats.tsx b/src/app/ui/dashboard/new/dashboard-user-stats.tsx index 976c7a0..9622ccf 100644 --- a/src/app/ui/dashboard/new/dashboard-user-stats.tsx +++ b/src/app/ui/dashboard/new/dashboard-user-stats.tsx @@ -5,12 +5,12 @@ import { convertBytes } from '@/app/lib/convertBytes'; import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo'; import { useEffect } from 'react'; import { useViolationStatistic } from '@/app/hooks/react-query/useViolationStatistic'; -import {IconDocument, IconSearch, IconWarning, IconGraph, IconDiscet, IconShield} from '@/app/ui/icons/icons'; +import { IconDocument, IconSearch, IconWarning, IconGraph, IconDiscet, IconShield } from '@/app/ui/icons/icons'; export default function DashboardUserStats() { const t = useTranslations("Global"); const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo(); - const { data: violationStatistic } = useViolationStatistic(); + const { data: violationStatistic, isLoading: violationStatisticLoading } = useViolationStatistic(); return ( <> @@ -22,7 +22,19 @@ export default function DashboardUserStats() { -
{filesInfo?.total.protected ? filesInfo?.total.protected : 0}
+
+
+ {isLoading ? ( +
+
+
+ ) : ( + filesInfo?.total.protected ? filesInfo?.total.protected : 0 + )} +
+
{t('files-under-protection')}
@@ -34,7 +46,19 @@ export default function DashboardUserStats() {
-
{filesInfo?.total.check ? filesInfo?.total.check : 0}
+
+
+ {isLoading ? ( +
+
+
+ ) : ( + filesInfo?.total.check ? filesInfo?.total.check : 0 + )} +
+
{t('matches-found')}
@@ -46,7 +70,19 @@ export default function DashboardUserStats() {
-
{violationStatistic?.total_violations ?? 0}
+
+
+ {violationStatisticLoading ? ( +
+
+
+ ) : ( + violationStatistic?.total_violations ?? 0 + )} +
+
{t('violations')}
@@ -59,7 +95,17 @@ export default function DashboardUserStats() {
- {filesInfo?.total.size ? convertBytes(filesInfo?.total.size) : 0} +
+ {isLoading ? ( +
+
+
+ ) : ( + filesInfo?.total.size ? convertBytes(filesInfo?.total.size) : 0 + )} +
{t('disk-space-used')} @@ -72,7 +118,19 @@ export default function DashboardUserStats() {
-
{violationStatistic?.in_progress_violations ?? 0}
+
+
+ {violationStatisticLoading ? ( +
+
+
+ ) : ( + violationStatistic?.in_progress_violations ?? 0 + )} +
+
{t('violations-in-progress')}
diff --git a/src/app/ui/my-content/new/my-content-stats-overview.tsx b/src/app/ui/my-content/new/my-content-stats-overview.tsx index deffedf..cd2fe36 100644 --- a/src/app/ui/my-content/new/my-content-stats-overview.tsx +++ b/src/app/ui/my-content/new/my-content-stats-overview.tsx @@ -3,11 +3,13 @@ import { useTranslations } from 'next-intl'; import { convertBytes } from '@/app/lib/convertBytes'; 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() { const t = useTranslations('Global'); const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo(); + const { data: monitoringStats, isLoading: monitoringStatsLoading } = useMonitoringStats(); return (
@@ -16,10 +18,23 @@ export default function MyContentStatsOverview() {
- {/*
+0%
*/}
-
{filesInfo?.total.quantity}
-
Всего файлов
+
+
+ {isLoading ? ( +
+
+
+ ) : ( + filesInfo?.total.quantity + )} +
+
+
+ {t('total-files')} +
@@ -27,10 +42,23 @@ export default function MyContentStatsOverview() {
- {/*
+0%
*/}
-
{filesInfo?.total.protected}
-
Защищено файлов
+
+
+ {isLoading ? ( +
+
+
+ ) : ( + filesInfo?.total.protected + )} +
+
+
+ {t('protected-files')} +
@@ -38,10 +66,23 @@ export default function MyContentStatsOverview() {
- {/*
+0%
*/}
-
0
-
Проверок защиты
+
+
+ {monitoringStatsLoading ? ( +
+
+
+ ) : ( + monitoringStats?.total_searches ? monitoringStats?.total_searches : 0 + )} +
+
+
+ {t('checks')} +
@@ -49,10 +90,23 @@ export default function MyContentStatsOverview() {
- {/*
+0%
*/}
-
{convertBytes(filesInfo?.total.size ?? 0)}
-
Хранилище
+
+
+ {isLoading ? ( +
+
+
+ ) : ( + convertBytes(filesInfo?.total.size ?? 0) + )} +
+
+
+ {t('storage')} +
) diff --git a/src/app/ui/reports/reports-info.tsx b/src/app/ui/reports/reports-info.tsx index ec9c7a5..67cdba5 100644 --- a/src/app/ui/reports/reports-info.tsx +++ b/src/app/ui/reports/reports-info.tsx @@ -42,7 +42,6 @@ export default function ReportsInfo() {
- {/* {filesInfo?.total.check ? filesInfo?.total.check : 0} */} {monitoringStats?.total_searches ? monitoringStats?.total_searches : 0}
{t('monitoring')}
diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json index 56256e3..d47f2ef 100644 --- a/src/i18n/messages/en.json +++ b/src/i18n/messages/en.json @@ -417,7 +417,9 @@ "fill-title-of-the-case": "Fill the case title", "enter-the-amount-of-damage": "Enter the amount of damage", "download-all": "Download all", - "selected-files": "Selected files" + "selected-files": "Selected files", + "protected-files": "Protected files", + "storage": "Storage" }, "Login-register-form": { "and": "and", diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json index ef4ea8a..919bb8a 100644 --- a/src/i18n/messages/ru.json +++ b/src/i18n/messages/ru.json @@ -417,7 +417,9 @@ "fill-title-of-the-case": "Заполните название дела", "enter-the-amount-of-damage": "Введите сумму ущерба", "download-all": "Скачать все", - "selected-files": "Выбранно файлов" + "selected-files": "Выбранно файлов", + "protected-files": "Защищено файлов", + "storage": "Хранилище" }, "Login-register-form": { "and": "и",