<template>
    <div class="overlay-loader" v-if="isLoaderOpen">
        <div id="loader" class="cp-spinner cp-round"></div>
    </div>
</template>

<script>
export default {
    props: ['id', 'isOpen'],

    computed: {
        isLoaderOpen() {
            this.addClassToBody();

            return this.isOpen;
        }
    },

    methods: {
        addClassToBody() {
            var body = document.querySelector("body");

            if (this.isOpen) {
                body.classList.add("modal-open");
            } else {
                body.classList.remove("modal-open");
            }
        }
    }
}
</script>
