Merge pull request #19 from bashu22tiwari/#1wf7518

Add Ionic Skeleton Text to Image component(#1wf7518)
hotwax · Feb 3, 2022 · e62e7dd · e62e7dd
2 parents 52e13fa + 5f2495e
commit e62e7dd
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 12 deletions.
diff --git a/changelogs/unreleased/-1wf7518.yml b/changelogs/unreleased/-1wf7518.yml
@@ -0,0 +1,6 @@
+---
+title: Implemented code to use skeleton text in Image component
+ticket_id: "#1wf7518"
+merge_request: 19
+author: Bashu Tiwari
+type: added
diff --git a/changelogs/unreleased/-1ym3jwv.yml b/changelogs/unreleased/-1ym3jwv.yml
diff --git a/src/components/Image.vue b/src/components/Image.vue
@@ -1,14 +1,18 @@
 <template>
-  <img :src="imageUrl"/>
+  <img :src="imageUrl" v-if="imageUrl" />
+  <ion-skeleton-text v-else animated />
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { IonSkeletonText } from '@ionic/vue'
 
 export default defineComponent({
   name: "Image",
   props: ['src'],
-  components: {},
+  components: {
+    IonSkeletonText
+  },
   created() {
     if (
       process.env.VUE_APP_RESOURCE_URL
@@ -25,7 +29,7 @@ export default defineComponent({
   data() {
     return {
       resourceUrl: '',
-      imageUrl: require("@/assets/images/defaultImage.png")
+      imageUrl: ''
     }
   },
   methods: {
@@ -51,6 +55,7 @@ export default defineComponent({
           this.checkIfImageExists(this.src).then(() => {
             this.imageUrl = this.src;
           }).catch(() => {
+            this.imageUrl = require("@/assets/images/defaultImage.png") ;
             console.error("Image doesn't exist");
           })
         } else {

diff --git a/src/views/Login.vue b/src/views/Login.vue
@@ -6,15 +6,15 @@
           <img src="../assets/images/hc.png"/>
 
           <ion-item lines="full">
-            <ion-label position="fixed">{{ $t("OMS") }}</ion-label>
+            <ion-label>{{ $t("OMS") }}</ion-label>
             <ion-input name="instanceUrl" v-model="instanceUrl" id="instanceUrl" type="text" required />
           </ion-item>
           <ion-item lines="full">
-            <ion-label position="fixed">{{ $t("Username") }}</ion-label>
+            <ion-label>{{ $t("Username") }}</ion-label>
             <ion-input name="username" v-model="username" id="username" type="text" required />
           </ion-item>
           <ion-item lines="none">
-            <ion-label position="fixed">{{ $t("Password") }}</ion-label>
+            <ion-label>{{ $t("Password") }}</ion-label>
             <ion-input name="password" v-model="password" id="password" type="password" required />
           </ion-item>