How to add preloader and success message on form s

Question

How to accomplish below task using vue-resource:

1. Include preloader text Loading... or gif image when fetching the data from the server.
2. Show success message on form submit.

Answer 1

This was questioned by me, with the help that I got from @Vamsi, here is my solution:

Component

<loading-indicator v-if="loadingGroup" :bgAlpha="'.6'"></loading-indicator>

<script>
  import LoadingIndicator from '../partials/LoadingIndicator'

  export default {
    data () {
      return {
        loadingGroup: true,
      }
    },

    components: {LoadingIndicator},

    methods: {      
      fetchGroup() {
        let _this = this;
        this.loadingGroup = true;

        api._get({url: 'api/group/' + _this.$route.params.id})
          .then(function (response) {
            _this.groupData = response.data;
            _this.loadingGroup = false;
          });
      }
    },

    mounted() {
      this.fetchGroup();
    }
  }
</script>

My Template that's in: ../partials/LoadingIndicator.vue

<template>
  <div class="pin pin-xy d-flex"
       :style="{ backgroundColor: 'rgba(255, 255 ,255,' + bgAlpha + ')'}">
    <div class="loading-indicator">
      <div class="loading-indicator-circle"></div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      bgAlpha: String
    }
  }
</script>

<style lang="scss">
  .pin {
    position: absolute;

    &-xy {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }

  .d-flex {
    display: flex;
  }

  .loading-indicator {
    width: 32px;
    height: 32px;
    margin: auto;
    overflow: hidden;
    animation: animation-fadeIn 1s ease-in;
  }

  .loading-indicator-circle {
    animation: loading-indicator-rotation 0.67s linear infinite;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMiAzMic+PGxpbmVhckdyYWRpZW50IGlkPSdGYXN0TG9hZGluZ0luZGljYXRvci1saW5lYXJHcmFkaWVudCcgZ3JhZGllbnRVbml0cz0ndXNlclNwYWNlT25Vc2UnIHgxPScxLjc4MDQnIHkxPScxNi4wMzc5JyB4Mj0nMzAuMTQzOScgeTI9JzE2LjAzNzknPjxzdG9wIG9mZnNldD0nMC40MTY5JyBzdG9wLWNvbG9yPScjQ0RDRkQyJy8+PHN0b3Agb2Zmc2V0PScwLjkzNzYnIHN0b3AtY29sb3I9J3JnYmEoMjQ4LDI0OCwyNDksMCknLz48L2xpbmVhckdyYWRpZW50PjxjaXJjbGUgY3g9JzE2JyBjeT0nMTYnIHI9JzEyLjcnIHN0eWxlPSdmaWxsOiBub25lOyBzdHJva2U6IHVybCgjRmFzdExvYWRpbmdJbmRpY2F0b3ItbGluZWFyR3JhZGllbnQpOyBzdHJva2Utd2lkdGg6IDI7Jz48L2NpcmNsZT48L3N2Zz4=");
    height: 100%;
    width: 100%
  }

  @keyframes loading-indicator-rotation {
    from {
      transform: rotate(0deg)
    }
    to {
      transform: rotate(360deg)
    }
  }
</style>

Answer 2

One way of doing this is :

<template>

    <div>
        <div class="loader" v-if="loader"></div>
        <div>
            //display fetchedData using logic you wish like v-for.....
        </div>
        <form>
            //your form inputs
            <button @click.prevent="submit">Submit</button>
        </form>
    </div>    

</template>

<script>


    export default{
        data(){
            return{
                loader: false,
                fetchedData: null
            }
        },
        mounted(){
            this.loader = true;
                this.$httpget('your_url')
                    .then(response => {
                        this.fetchedData = response;
                        this.loader = false;
                    },err => {
                    });
        },
        methods:{

            submit(){
                this.loader = true;
                this.$http.post('your_url', {your_body})
                    .then(response => {
                        this.loader = false;
                    },err => {
                        alert('form not submitted');
                    });
            }
        },

    }
</script>

<style scoped>
    loader {
        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%, -50%);
        border: 10px solid #f3f3f3; /* Light grey */
        border-top: 16px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 75px;
        height: 75px;
        animation: spin 2s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style> 

Here is the working fiddle