Updated spinner without using empty-state class

hotwax · Jan 5, 2024 · 5a4161a · 5a4161a
1 parent 30c1e71
commit 5a4161a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 16 deletions.
diff --git a/src/theme/variables.css b/src/theme/variables.css
@@ -265,14 +265,3 @@ http://ionicframework.com/docs/theming/ */
     display: none;
   }
 }
-.empty-state {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  align-items: center;
-}
-.empty-state ion-spinner{
-  margin-right: 10px;
-}
diff --git a/src/views/TimezoneModal.vue b/src/views/TimezoneModal.vue
@@ -13,12 +13,18 @@
     </ion-toolbar>
   </ion-header>
 
-  <ion-content class="ion-padding">
-    <!-- Empty state -->
+  <!-- Empty state -->
+  <ion-content class="ion-text-center">
     <div class="empty-state" v-if="filteredTimeZones.length === 0">
-      <ion-spinner name="crescent" ></ion-spinner>
-      <p>{{ $t("Fetching time zones") }}</p>
-    </div>
+        <ion-row class="ion-align-items-center ion-justify-content-center" style="height: 50vh;">
+         <ion-col size="auto">
+            <ion-spinner name="crescent" ></ion-spinner>
+         </ion-col>
+         <ion-col size="auto">
+            <p>{{ $t("Fetching time zones")}}</p>
+         </ion-col>
+      </ion-row>  
+    </div>   
 
     <!-- Timezones -->
     <div v-else>