<script setup>
import { ref } from 'vue';
const isLoading = ref(true);
const { __ } = wp.i18n;
const onIframeLoad = () => {
  isLoading.value = false;
};
</script>

<template>
    <div v-if="isLoading" class="loading-message">{{ __('Loading content, please wait...', 'respacio-houzez-import') }}</div>
    <div class="iframe-container" >
      <iframe
        src="https://respacio.com/knowledgebase/"
        sandbox="allow-scripts allow-same-origin"
        @load = "onIframeLoad"
        width="100%"
        height="700"
        frameborder="0"
      ></iframe>
    </div>
</template>

<style scoped>
.iframe-container {
  margin-top: -50px;
}

.loading-message {
  text-align: center;
  padding: 20px;
  font-size: 18px;
  color: #555;
}

iframe {
  border: none;
}

</style>


