feat: handle loading state

packages/nc-gui/components/feed/Changelog/Item.vue

@@ -12,7 +12,7 @@ const props = defineProps<{
 }>()
 
 const {
-  item: { CreatedAt, Description, Url, Title, Tags },
+  item: { 'Published Time': CreatedAt, Description, Title, Tags },
 } = props
 
 const iconColorMap = {
@@ -24,7 +24,7 @@ const iconColorMap = {
     icon: iconMap.star,
     color: 'purple',
   },
-  'Bug fixes': {
+  'Bug Fixes': {
     icon: iconMap.ncTool,
     color: 'green',
   },

packages/nc-gui/components/feed/Changelog/index.vue

@@ -26,7 +26,11 @@ const { isLoading } = useInfiniteScroll(
     }"
     class="overflow-y-auto nc-scrollbar-md mx-auto w-full"
   >
-    <div class="max-w-260 mx-auto">
+    <div v-if="isLoading && !githubFeed.length" class="flex items-center justify-center h-full w-full">
+      <GeneralLoader size="xlarge" />
+    </div>
+
+    <div v-else class="max-w-260 mx-auto">
       <FeedChangelogItem v-for="feed in githubFeed" :key="feed.Id" :item="feed" />
     </div>
   </div>

packages/nc-gui/components/feed/Recents/Card.vue

@@ -15,7 +15,7 @@ const props = defineProps<{
 const { getPossibleAttachmentSrc } = useAttachment()
 
 const {
-  item: { CreatedAt, Description, Url, Title, Tags, 'Feed Source': source, Images },
+  item: { 'Published Time': CreatedAt, Description, Url, Title, 'Feed Source': source, Images },
 } = props
 
 const feedIcon = {

packages/nc-gui/components/feed/Recents/index.vue

@@ -28,7 +28,10 @@ const { isLoading } = useInfiniteScroll(
     }"
     class="overflow-y-auto nc-scrollbar-md w-full"
   >
-    <div class="flex flex-col my-6 items-center gap-6">
+    <div v-if="isLoading && !socialFeed.length" class="flex items-center justify-center h-full w-full">
+      <GeneralLoader size="xlarge" />
+    </div>
+    <div v-else class="flex flex-col my-6 items-center gap-6">
       <FeedRecentsCard v-for="feed in socialFeed" :key="feed.Id" :item="feed" />
     </div>
   </div>

packages/nc-gui/components/feed/Roadmap.vue

@@ -13,11 +13,10 @@ const handleIframeLoad = () => {
     :style="{
       height: 'calc(100dvh - var(--toolbar-height) + 4rem)',
     }"
-    :class="{
-      'hidden': !isLoaded,
-      'block h-full': isLoaded,
-    }"
   >
+    <div v-if="!isLoaded" class="flex items-center justify-center h-full w-full">
+      <GeneralLoader size="xlarge" />
+    </div>
     <iframe
       ref="iFrame"
       src="https://w21dqb1x.nocodb.com/#/nc/kanban/d719962a-1666-464f-8789-054a13a747f7?disableTopbar=true&disableToolbar=true"

packages/nc-gui/components/feed/Twitter/index.vue

@@ -1,22 +1,17 @@
 <script setup lang="ts">
-import Tweet from 'vue-tweet'
+const isLoaded = ref(false)
 
-const { twitterFeed, loadFeed } = useProductFeed()
+const scriptTag = ref()
 
-const scrollContainer = ref<HTMLElement>()
+const handleIframeLoad = () => {
+  setTimeout(() => {
+    isLoaded.value = true
+  }, 2000)
+}
 
-const { isLoading } = useInfiniteScroll(
-  scrollContainer,
-  async () => {
-    if (isLoading.value) return
-    const data = await loadFeed({
-      type: 'twitter',
-      loadMore: true,
+onMounted(() => {
+  scriptTag.value.src = 'https://platform.twitter.com/widgets.js'
 })
-    twitterFeed.value = [...twitterFeed.value, ...data]
-  },
-  { distance: 1, interval: 2000 },
-)
 </script>
 
 <template>
@@ -27,9 +22,13 @@ const { isLoading } = useInfiniteScroll(
     }"
     class="overflow-y-auto nc-scrollbar-md w-full"
   >
-    <div class="mx-auto flex flex-col items-center">
+    <div v-if="!isLoaded" class="flex items-center justify-center h-full w-full">
+      <GeneralLoader size="xlarge" />
+    </div>
+    <div class="mx-auto flex flex-col my-6 items-center">
       <div style="min-width: 650px">
-        <Tweet v-for="feed in twitterFeed" :key="feed.Id" align="center" conversation="all" class="mt-6" :tweet-url="feed.Url" />
+        <a class="twitter-timeline" href="https://twitter.com/nocodb?ref_src=twsrc%5Etfw"></a>
+        <Script ref="scriptTag" async charset="utf-8" @load="handleIframeLoad"></Script>
       </div>
     </div>
   </div>

packages/nc-gui/components/feed/Youtube/index.vue

@@ -29,7 +29,10 @@ const gotoChannel = () => {
     }"
     class="overflow-y-auto nc-scrollbar-md mt-9 mx-auto w-full"
   >
-    <div class="max-w-[764px] mx-auto">
+    <div v-if="isLoading && !youtubeFeed.length" class="flex items-center justify-center h-full w-full">
+      <GeneralLoader size="xlarge" />
+    </div>
+    <div v-else class="max-w-[764px] mx-auto">
       <div class="flex gap-3 items-center justify-between">
         <span class="text-gray-900 font-semibold"> Recent Videos </span>
         <NcButton type="secondary" size="small" @click="gotoChannel"> Go to Youtube </NcButton>

packages/nc-gui/composables/useProductFeed.ts

@@ -18,8 +18,6 @@ export const useProductFeed = createSharedComposable(() => {
 
   const socialFeed = ref<ProductFeedItem[]>([])
 
-  const twitterFeed = ref<ProductFeedItem[]>([])
-
   const loadFeed = async ({ loadMore, type }: { loadMore: boolean; type: 'youtube' | 'github' | 'all' | 'twitter' }) => {
     let page = 1
 
@@ -34,9 +32,6 @@ export const useProductFeed = createSharedComposable(() => {
         case 'all':
           page = Math.ceil(socialFeed.value.length / 10) + 1
           break
-        case 'twitter':
-          page = Math.ceil(twitterFeed.value.length / 10) + 1
-          break
       }
     }
 
@@ -56,7 +51,6 @@ export const useProductFeed = createSharedComposable(() => {
     youtubeFeed,
     githubFeed,
     socialFeed,
-    twitterFeed,
     loadFeed,
   }
 })

packages/nc-gui/lib/types.ts

@@ -284,7 +284,7 @@ interface ProductFeedItem {
   ['Feed Source']: 'Youtube' | 'Github' | 'Twitter'
   Url: string
   Tags?: string
-  CreatedAt: string
+  ['Published Time']: string
   Images?: Record<string, any>[] | null
 }