add photo loading

src/fe/healthpassport/css/all.css

@@ -11340,6 +11340,18 @@ p {
   min-height: 100%;
   background: url(../images/passport-bg.png) no-repeat bottom center/contain, linear-gradient(to bottom, rgb(191, 230, 246) 0%, rgba(191, 230, 246, 0) 100%);
 }
+.passport .photo .load {
+  width: 50%;
+  height: 50%;
+}
+.passport .photo .load-wrapp {
+  width: 11em;
+  height: 11em;
+}
+.passport .photo .bubble-1, .passport .photo .bubble-2 {
+  width: 2em;
+  height: 2em;
+}
 .passport__container {
   width: 100%;
 }

src/fe/healthpassport/css/page/_passport.scss

@@ -4,6 +4,20 @@
     width: 100%;
     min-height: 100%;
     background: url(../images/passport-bg.png) no-repeat bottom center/contain, linear-gradient(to bottom, rgba(191,230,246,1) 0%,rgba(191,230,246,0) 100%);;
+    .photo {
+        .load {
+            width: 50%;
+            height: 50%;
+            &-wrapp {
+                width: 11em;
+                height: 11em;
+            }
+        }
+        .bubble-1, .bubble-2 {
+            width: 2em;
+            height: 2em;
+        }
+    }
     &__container {
         width: 100%;
     }

src/fe/healthpassport/index.html

@@ -413,6 +413,14 @@
               <div class="passport__intro__container">
                 <div class="photo">
                   <div class="photo__img"></div>
+                  <div class="load-wrapp">
+                    <div class="load">
+                      <div class="spinner">
+                        <div class="bubble-1"></div>
+                        <div class="bubble-2"></div>
+                      </div>
+                    </div>
+                  </div>
                   <input type="file" id="fileInput2" class="fileInput" accept="image/*">
                   <div class="photo__icon photo__icon-2">
                     <img src="./images/solar_camera-linear.png" alt="">

src/fe/healthpassport/js/services/index.js

@@ -12,14 +12,14 @@ function Service() {
   function init() {
     console.log('GameService init')
 
-    // return liffInit().then((profile) => {
+    return liffInit().then((profile) => {
       
       // // 測試用資料
-      const profile = {
-        userId: "Ua89aacd560a328ece0fec5584435046f",
-        displayName: "Tim",
-        pictureUrl: "https://sprofile.line-scdn.net/0hAvrrYLRRHllfCwoU_RtgJi9bHTN8ekdLdWRZPmJYQGxnPFwLdG5Za29YSTkyb1AGID9XbzoLEmlTGGk_QV3ibVg7QG5mOVANdm5Uug",
-      }
+      // const profile = {
+      //   userId: "Ua89aacd560a328ece0fec5584435046f",
+      //   displayName: "Tim",
+      //   pictureUrl: "https://sprofile.line-scdn.net/0hAvrrYLRRHllfCwoU_RtgJi9bHTN8ekdLdWRZPmJYQGxnPFwLdG5Za29YSTkyb1AGID9XbzoLEmlTGGk_QV3ibVg7QG5mOVANdm5Uug",
+      // }
 
       m_LineUserId = profile.userId || '';
       m_LineName = profile.displayName || '';
@@ -29,12 +29,12 @@ function Service() {
       console.log('lineUserId:', m_LineUserId)
 
       // 測試用
-      return Promise.resolve(profile);
+      // return Promise.resolve(profile);
 
-    //   return profile;
-    // }).catch((error) => {
-    //   console.log('[GameService] Liff Init Error \n Name:' + error.name + '\n Message:' + error.message);
-    // })
+      return profile;
+    }).catch((error) => {
+      console.log('[GameService] Liff Init Error \n Name:' + error.name + '\n Message:' + error.message);
+    })
 
   }