From 52e49d5f9dadabcf2f4bb54ddd621d0024a83c76 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Wed, 6 Sep 2023 18:55:39 +0530
Subject: [PATCH] feat: Creates component to show article in an iFrame  (#7857)

---
 .../components/ArticleSkeletonLoader.vue      | 26 +++++++++
 .../shared/components/IframeLoader.vue        | 55 +++++++++++++++++++
 .../components/ArticleCardSkeletonLoader.vue  | 15 +++++
 app/javascript/widget/views/ArticleViewer.vue | 22 ++++++++
 4 files changed, 118 insertions(+)
 create mode 100644 app/javascript/shared/components/ArticleSkeletonLoader.vue
 create mode 100644 app/javascript/shared/components/IframeLoader.vue
 create mode 100644 app/javascript/widget/components/ArticleCardSkeletonLoader.vue
 create mode 100644 app/javascript/widget/views/ArticleViewer.vue

diff --git a/app/javascript/shared/components/ArticleSkeletonLoader.vue b/app/javascript/shared/components/ArticleSkeletonLoader.vue
new file mode 100644
index 000000000..b2ef1dfdc
--- /dev/null
+++ b/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>
diff --git a/app/javascript/shared/components/IframeLoader.vue b/app/javascript/shared/components/IframeLoader.vue
new file mode 100644
index 000000000..efa9066eb
--- /dev/null
+++ b/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>
diff --git a/app/javascript/widget/components/ArticleCardSkeletonLoader.vue b/app/javascript/widget/components/ArticleCardSkeletonLoader.vue
new file mode 100644
index 000000000..acdada654
--- /dev/null
+++ b/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>
diff --git a/app/javascript/widget/views/ArticleViewer.vue b/app/javascript/widget/views/ArticleViewer.vue
new file mode 100644
index 000000000..6a69beded
--- /dev/null
+++ b/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>