init commit,

03_source/mobile/src/components/Loading/index.tsx

@@ -0,0 +1,58 @@
+import React, { CSSProperties, useState } from 'react';
+import { connect } from '../../data/connect';
+import { IonLoading } from '@ionic/react';
+import { GridLoader } from 'react-spinners';
+
+interface OwnProps {}
+
+interface StateProps {}
+
+interface DispatchProps {}
+
+const override: CSSProperties = {
+  display: 'block',
+  margin: '0 auto',
+  borderColor: 'red',
+};
+
+function Loading() {
+  let [loading, setLoading] = useState(true);
+  let [color, setColor] = useState('#333333');
+
+  return (
+    <>
+      <div
+        style={{
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '1rem',
+            alignItems: 'center',
+          }}
+        >
+          <GridLoader
+            color={color}
+            loading={loading}
+            cssOverride={override}
+            size={15}
+            aria-label="Loading Spinner"
+            data-testid="loader"
+          />
+          <div>Loading...</div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default connect<OwnProps, StateProps, DispatchProps>({
+  mapStateToProps: (state) => ({}),
+  component: React.memo(Loading),
+});