feat:handle infinite load

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

@@ -1,14 +1,29 @@
 <script setup lang="ts">
 const { loadGithubFeed, githubFeed } = useProductFeed()
 
-onMounted(async () => {
-  await loadGithubFeed()
-})
+const scrollContainer = ref<HTMLElement>()
+
+const { isLoading } = useInfiniteScroll(
+  scrollContainer,
+  async () => {
+    if (isLoading.value) return
+    await loadGithubFeed(true)
+  },
+  { distance: 10 },
+)
 </script>
 
 <template>
-  <div class="max-w-260 mx-auto">
-    <FeedChangelogItem v-for="feed in githubFeed" :key="feed.id" :date="feed.published_at" :body="feed?.body" />
+  <div
+    ref="scrollContainer"
+    :style="{
+      height: 'calc(100dvh - var(--toolbar-height) - 3rem)',
+    }"
+    class="overflow-y-auto nc-scrollbar-md mx-auto w-full"
+  >
+    <div class="max-w-260 mx-auto">
+      <FeedChangelogItem v-for="feed in githubFeed" :key="feed.id" :date="feed.published_at" :body="feed?.body" />
+    </div>
   </div>
 </template>
 

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

@@ -26,6 +26,9 @@ const handleIframeLoad = () => {
 
 <template>
   <div
+    :style="{
+      height: 'calc(100dvh - var(--toolbar-height))',
+    }"
     :class="{
       'hidden': !isLoaded,
       'block h-full': isLoaded,

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

@@ -56,17 +56,7 @@ const tabs = [
             </span>
           </div>
         </template>
-        <div
-          :style="{
-            height:
-              activeTab === 'recents'
-                ? 'calc(100dvh - var(--toolbar-height) - var(--topbar-height))'
-                : 'calc(100dvh - var(--toolbar-height))',
-          }"
-          class="overflow-y-auto nc-scrollbar-md mx-auto w-full"
-        >
-          <component :is="tab.container" />
-        </div>
+        <component :is="tab.container" />
       </a-tab-pane>
     </NcTabs>
   </div>

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

@@ -29,7 +29,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-5">
+  <div class="flex flex-col mt-6 gap-5">
     <div class="aspect-video !rounded-lg mx-auto !h-[428px]">
       <div id="player" ref="videoPlayer" class="plyr__video-embed">
         <iframe
@@ -40,9 +40,12 @@ onBeforeUnmount(() => {
         ></iframe>
       </div>
     </div>
-    <div>
+    <div class="text-gray-900 font-bold text-2xl">
       {{ name }}
     </div>
+    <div class="text-gray-900">
+      {{ body }}
+    </div>
   </div>
 </template>
 

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

@@ -1,22 +1,48 @@
 <script setup lang="ts">
 const { youtubeFeed, loadYoutubeFeed } = useProductFeed()
 
-onMounted(() => {
-  loadYoutubeFeed()
-})
+const scrollContainer = ref<HTMLElement>()
+
+const { isLoading } = useInfiniteScroll(
+  scrollContainer,
+  async () => {
+    if (isLoading.value) return
+    await loadYoutubeFeed(true)
+  },
+  { distance: 10 },
+)
+
+const gotoChannel = () => {
+  window.open('https://www.youtube.com/@nocodb?ref=product_feed', '_blank')
+}
 </script>
 
 <template>
-  <div class="flex gap-2 flex-col">
-    <FeedYoutubePlayer
-      v-for="feed in youtubeFeed"
-      :key="feed.id"
-      :html_url="feed.html_url"
-      :name="feed.name"
-      :body="feed.body"
-      :published_at="feed.published_at"
-      :embed_url="feed.embed_url"
-    />
+  <div
+    ref="scrollContainer"
+    :style="{
+      height: 'calc(100dvh - var(--toolbar-height) - 5.25rem)',
+    }"
+    class="overflow-y-auto nc-scrollbar-md mt-9 mx-auto w-full"
+  >
+    <div 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>
+      </div>
+
+      <div class="flex gap-2 flex-col">
+        <FeedYoutubePlayer
+          v-for="feed in youtubeFeed"
+          :key="feed.id"
+          :html_url="feed.html_url"
+          :name="feed.name"
+          :body="feed.body"
+          :published_at="feed.published_at"
+          :embed_url="feed.embed_url"
+        />
+      </div>
+    </div>
   </div>
 </template>
 

packages/nc-gui/composables/useProductFeed.ts

@@ -64,7 +64,7 @@ export const useProductFeed = createSharedComposable(() => {
           },
     })
     ytNextPageToken.value = data.nextPageToken
-    youtubeFeed.value = data.videos
+    youtubeFeed.value = [...youtubeFeed.value, ...data.videos]
   }
 
   const loadGithubFeed = async (loadMore?: boolean) => {
@@ -78,7 +78,7 @@ export const useProductFeed = createSharedComposable(() => {
             per_page: 10,
           },
     })
-    githubFeed.value = data
+    githubFeed.value = [...githubFeed.value, ...data]
   }
 
   return {