``refactor Rename LoadingScreen component to LoadingSpinner and refactor structure for better reusability``

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() {
+export function LoadingSpinner(): React.JSX.Element {
-  const { t, i18n } = useTranslation();
+  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
+        <LoadingSpinner />
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: '1rem',
-            //
-            marginTop: '33vh',
-          }}
-        >
-          <IonSpinner></IonSpinner>
-          <div>{t('Loading')}</div>
-        </div>
       </IonContent>
     </IonPage>
   );