<template>
  <router-view v-slot="{ Component }">
    <transition
      :duration="{ enter: 200, leave: 200 }"
      name="route-fade"
      mode="out-in">
      <!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
      <component :is="Component" />
    </transition>
  </router-view>
  <loadingModal
    :showLoader="shouldShowLoader"
    :showTextCarousel="shouldShowTextCarousel" />
</template>

<script>
import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
import showIssLoadingModal from '@/helpers/loading-modal-helper.js';

export default {
    name: 'app',
    components: {
        loadingModal
    },
    setup() {
        const { globalNonpersistedState } = showIssLoadingModal();
        return { globalNonpersistedState };
    },
    computed: {
        shouldShowLoader() {
            return this.globalNonpersistedState.showLoadingModal;
        },
        shouldShowTextCarousel() {
            return this.globalNonpersistedState.showTextCarousel;
        }
    }
};
</script>

<style lang="scss">
   @import "./node_modules/bootstrap/scss/bootstrap";
   @import "@/styles/common-styles.scss";
   @import "@/styles/common-typography-styles.scss";
   @import "@/styles/common-error-styles.scss";
   @import "@/styles/common-animations.scss";
   @import "@/styles/shared-input-button-styles.scss";
   @import "@/styles/client-customizations.scss";
</style>
