pls_roast_me

<template lang="html">
  <div class="">
    <button class="ui primary button basic"@click="fetchUsers"><i class="icon refresh"></i> Fetch New Users </button>
    <br/>
    <br/>
    <div v-if="error" class="ui negative message">
      <div class="header">
        There was some error
      </div>
      <p> {{ errorMessage }} </p>
    </div>
    <div class="ui cards">
      <div v-for="s in suggestions" class="card" v-cloak>
        <div class="ui dimmer" :class="[isActive ? 'active' : '']">
          <div class="ui text loader"> Fetching Latest Data. Please Wait.</div>
        </div>
        <div class="image" >
          <div class="ui dimmer" :class="[isImgActive ? 'active' : '']">
            <div class="ui loader text"> Loading Image</div>
          </div>
          <img class="inline loader"  v-on:load="checkIfImgReady" :src="s.avatar_url">
        </div>
        <div class="content">
          <div class="header">{{ s.login }}</div>
          <div class="meta">
            <a :href="s.html_url" target="_blank"><button class="circular ui icon button right floated basic positive"><i class="icon add user"></i></button></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Axios from 'axios'
export default {
  data () {
    return {
      suggestions: null,
      isActive: false,
      isImgActive: false,
      errorMessage: null,
      error: false
    }
  },
  methods: {
    fetchUsers () {
      let self = this
      // this.isActive = true
      this.isImgActive = true
      Axios.get('https://api.github.com/users?since=' + Math.random() * 500)
      .then(response => {
        self.suggestions = response.data.slice(0, 4)
        this.isActive = false
      })
      .catch(error => {
        self.errorMessage = error.response.data.message
        self.error = true
      })
    },
    checkIfImgReady (e) {
      this.isImgActive = false
    }
  },
  mounted () {
    this.fetchUsers()
  }
}
</script>

<style lang="css">
</style>