From 34a7ff7ac95eb23951bde1d70bdb0b0d0f75a719 Mon Sep 17 00:00:00 2001
From: louiscklaw <louiscklaw@123.com>
Date: Fri, 16 May 2025 15:55:07 +0800
Subject: [PATCH] ```refactor Rename LoadingScreen component to LoadingSpinner
 and refactor structure for better reusability```

---
 .../src/components/LoadingScreen/index.tsx    | 37 +++++++++++--------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/002_source/ionic_mobile/src/components/LoadingScreen/index.tsx b/002_source/ionic_mobile/src/components/LoadingScreen/index.tsx
index 53aa3c2..e4aa145 100644
--- a/002_source/ionic_mobile/src/components/LoadingScreen/index.tsx
+++ b/002_source/ionic_mobile/src/components/LoadingScreen/index.tsx
@@ -1,25 +1,32 @@
 import { IonContent, IonPage, IonSpinner } from '@ionic/react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-export function LoadingScreen() {
-  const { t, i18n } = useTranslation();
+export function LoadingSpinner(): React.JSX.Element {
+  const { t } = useTranslation();
 
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '1rem',
+        //
+        marginTop: '33vh',
+      }}
+    >
+      <IonSpinner></IonSpinner>
+      <div>{t('Loading')}</div>
+    </div>
+  );
+}
+
+export function LoadingScreen(): React.JSX.Element {
   return (
     <IonPage>
       <IonContent fullscreen>
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: '1rem',
-            //
-            marginTop: '33vh',
-          }}
-        >
-          <IonSpinner></IonSpinner>
-          <div>{t('Loading')}</div>
-        </div>
+        <LoadingSpinner />
       </IonContent>
     </IonPage>
   );