fix(p2p-stats): center loading state and add animated ellipsis

Use LoadingEllipsis for the P2P stats loading message with centered layout and extra bottom spacing.

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;
 }

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 = () => {
             </tbody>
           </table>
           <div className={styles.statsMeta}>
-            {statsState.loading ? t('p2p_stats_loading') : null}
+            {statsState.loading ? (
+              <div className={styles.statsLoading}>
+                <LoadingEllipsis string={t('p2p_stats_loading')} />
+              </div>
+            ) : null}
             {statsState.error && <div className={styles.error}>{statsState.error}</div>}
           </div>
         </>