feat: Creates component to show article in an iFrame (#7857)

app/javascript/shared/components/ArticleSkeletonLoader.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="p-4 space-y-6 bg-white">
+    <div class="space-y-2 animate-pulse ">
+      <div class="h-6 bg-slate-100 rounded w-1/5" />
+      <div class="h-10 bg-slate-100 rounded w-3/5" />
+    </div>
+    <div class="space-y-2 animate-pulse ">
+      <div class="h-5 bg-slate-100 rounded" />
+      <div class="h-5 bg-slate-100 rounded" />
+      <div class="h-5 bg-slate-100 rounded" />
+      <div class="h-5 bg-slate-100 rounded  w-4/5" />
+    </div>
+    <div class="space-y-2 animate-pulse ">
+      <div class="h-5 bg-slate-100 rounded" />
+      <div class="h-5 bg-slate-100 rounded" />
+      <div class="h-5 bg-slate-100 rounded w-3/5" />
+      <div class="h-5 bg-slate-100 rounded" />
+    </div>
+    <div class="space-y-2 animate-pulse ">
+      <div class="h-5 bg-slate-100 rounded" />
+      <div class="h-5 bg-slate-100 rounded" />
+      <div class="h-5 bg-slate-100 rounded" />
+      <div class="h-5 bg-slate-100 rounded w-3/5" />
+    </div>
+  </div>
+</template>

app/javascript/shared/components/IframeLoader.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="relative overflow-hidden pb-1/2 h-full">
+    <iframe
+      v-if="url"
+      :src="url"
+      class="absolute w-full h-full top-0 left-0"
+      @load="handleIframeLoad"
+      @error="handleIframeError"
+    />
+    <article-skeleton-loader
+      v-if="isLoading"
+      class="absolute w-full h-full top-0 left-0"
+    />
+    <div
+      v-if="showEmptyState"
+      class="absolute w-full h-full top-0 left-0 flex justify-center items-center"
+    >
+      <p>{{ $t('PORTAL.IFRAME_ERROR') }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import ArticleSkeletonLoader from 'shared/components/ArticleSkeletonLoader';
+
+export default {
+  name: 'IframeRenderer',
+  components: {
+    ArticleSkeletonLoader,
+  },
+  props: {
+    url: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      isLoading: true,
+      showEmptyState: !this.url,
+    };
+  },
+  methods: {
+    handleIframeLoad() {
+      // Once loaded, the loading state is hidden
+      this.isLoading = false;
+    },
+    handleIframeError() {
+      // Hide the loading state and show the empty state when an error occurs
+      this.isLoading = false;
+      this.showEmptyState = true;
+    },
+  },
+};
+</script>

app/javascript/widget/components/ArticleCardSkeletonLoader.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="py-4 space-y-4 bg-white dark:bg-slate-700">
+    <div class="space-y-2 animate-pulse ">
+      <div class="h-6 bg-slate-100 dark:bg-slate-500 rounded w-2/5" />
+    </div>
+    <div class="space-y-2 animate-pulse ">
+      <div class="h-4 bg-slate-100 dark:bg-slate-500 rounded" />
+      <div class="h-4 bg-slate-100 dark:bg-slate-500 rounded" />
+      <div class="h-4 bg-slate-100 dark:bg-slate-500 rounded" />
+    </div>
+    <div class="space-y-2 animate-pulse ">
+      <div class="h-4 bg-slate-100 dark:bg-slate-500 rounded w-1/5" />
+    </div>
+  </div>
+</template>

app/javascript/widget/views/ArticleViewer.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="bg-white h-full">
+    <iframe-loader :url="link" />
+  </div>
+</template>
+
+<script>
+import IframeLoader from 'shared/components/IframeLoader';
+
+export default {
+  name: 'ArticleViewer',
+  components: {
+    IframeLoader,
+  },
+  props: {
+    link: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>