Responsive Skeleton Image

Hey all,

Working on a showcase app for work and wanted a skeleton image to complement the skeleton text that is built right into ionic. I wanted it to behave like a responsive image and resize and everything, and I came up with this.

<responsive-skeleton-image :animated="true" :width="1200" :height="1200"></responsive-skeleton-image>

Width and height aren’t truly used, since it’s responsive, but giving it the original width and height of the image lets it figure out the aspect ratio to keep. After that, you can pass animated just like skeleton text, as it simply wraps skeleton text and applies special styling.

responsive-skeleton

Thought someone else might find this useful. Code below.

<template>
  <ion-skeleton-text :animated="animated" class="skeleton-image" :style="{ padding: paddingAspectRatio + '%' }"></ion-skeleton-text>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'

export default defineComponent({
  props: {
    width: {
      type: Number,
      required: true,
    },
    height: {
      type: Number,
      required: true,
    },
    animated: {
      type: Boolean,
      required: false,
    }
  },
  setup (props) {
    const paddingAspectRatio = computed(() => props.height / props.width * 50)

    return {
      paddingAspectRatio
    }
  }
})
</script>

<style scoped>
.skeleton-image {
  max-width: 100%;
  width: 100%;
  margin: 0;
}
</style>