diff --git a/src/components/settings-modal/p2p-stats-settings/p2p-stats-settings.module.css b/src/components/settings-modal/p2p-stats-settings/p2p-stats-settings.module.css index 89dc113f..f461c8c3 100644 --- a/src/components/settings-modal/p2p-stats-settings/p2p-stats-settings.module.css +++ b/src/components/settings-modal/p2p-stats-settings/p2p-stats-settings.module.css @@ -211,6 +211,13 @@ font-size: 0.85em; } +.statsLoading { + margin: 8px 0 16px; + padding-bottom: 8px; + text-align: center; + font-size: 10pt; +} + .statsMeta button { margin-left: 5px; } diff --git a/src/components/settings-modal/p2p-stats-settings/p2p-stats-settings.tsx b/src/components/settings-modal/p2p-stats-settings/p2p-stats-settings.tsx index c4c168c9..92021f93 100644 --- a/src/components/settings-modal/p2p-stats-settings/p2p-stats-settings.tsx +++ b/src/components/settings-modal/p2p-stats-settings/p2p-stats-settings.tsx @@ -15,6 +15,7 @@ import { type PublicEndpoint, } from '../../../lib/peer-geo'; import { getP2PRuntimeMode, type P2PRuntimeMode } from '../../../lib/p2p-runtime'; +import LoadingEllipsis from '../../loading-ellipsis'; import PeerWorldMap from './peer-world-map'; import styles from './p2p-stats-settings.module.css'; @@ -1087,7 +1088,11 @@ const P2PStatsSettings = () => {
- {statsState.loading ? t('p2p_stats_loading') : null} + {statsState.loading ? ( +
+ +
+ ) : null} {statsState.error &&
{statsState.error}
}