fix: review changes

packages/nc-gui/assets/nc-icons/refresh-cw.svg

@@ -0,0 +1,12 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="refresh-cw" clip-path="url(#clip0_195_4453)">
+<path id="Vector" d="M1.16699 13.3335V9.3335H5.16699" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M15.833 2.6665V6.6665H11.833" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M2.84033 5.99989C3.17844 5.04441 3.75308 4.19016 4.51064 3.51683C5.26819 2.84351 6.18397 2.37306 7.17252 2.14939C8.16106 1.92572 9.19016 1.95612 10.1638 2.23774C11.1374 2.51936 12.0238 3.04303 12.7403 3.75989L15.8337 6.66655M1.16699 9.33322L4.26033 12.2399C4.97682 12.9567 5.86324 13.4804 6.83687 13.762C7.81049 14.0437 8.83959 14.0741 9.82813 13.8504C10.8167 13.6267 11.7325 13.1563 12.49 12.4829C13.2476 11.8096 13.8222 10.9554 14.1603 9.99989" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_195_4453">
+<rect width="16" height="16" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const props = defineProps<{
+  page: 'all' | 'youtube' | 'github'
+}>()
+
+const { loadFeed, socialFeed, youtubeFeed, githubFeed } = useProductFeed()
+
+const triggerReload = async () => {
+  const data = (
+    await loadFeed({
+      type: props.page,
+      loadMore: false,
+    })
+  ).filter((item) => item['Feed Source'] !== 'Twitter')
+
+  if (props.page === 'all') {
+    socialFeed.value = data
+  } else if (props.page === 'youtube') {
+    youtubeFeed.value = data
+  } else if (props.page === 'github') {
+    githubFeed.value = data
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 items-center justify-center">
+    <GeneralIcon icon="warning" class="text-gray-500 w-8 h-8" />
+    <span class="text-gray-600 text-base font-semibold"> Unable to load feed </span>
+
+    <NcButton type="secondary" size="small" @click="triggerReload">
+      <div class="flex items-center text-gray-700 gap-2">
+        <GeneralIcon icon="refreshCw" />
+        <span class="text-sm"> Retry </span>
+      </div>
+    </NcButton>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { socialFeed, loadFeed } = useProductFeed()
+const { socialFeed, loadFeed, isErrorOccurred } = useProductFeed()
 
 const scrollContainer = ref<HTMLElement>()
 
@@ -28,7 +28,10 @@ const { isLoading } = useInfiniteScroll(
     }"
     class="overflow-y-auto nc-scrollbar-md w-full"
   >
-    <div v-if="isLoading && !socialFeed.length" class="flex items-center justify-center h-full w-full">
+    <div v-if="isErrorOccurred?.social && !socialFeed.length" class="h-full flex justify-center items-center">
+      <FeedError />
+    </div>
+    <div v-else-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">

packages/nc-gui/composables/useProductFeed.ts

@@ -17,6 +17,12 @@ export const useProductFeed = createSharedComposable(() => {
 
   const socialFeed = ref<ProductFeedItem[]>([])
 
+  const isErrorOccurred = reactive({
+    youtube: false,
+    github: false,
+    social: false,
+  })
+
   const loadFeed = async ({ loadMore, type }: { loadMore: boolean; type: 'youtube' | 'github' | 'all' | 'twitter' }) => {
     try {
       let page = 1
@@ -45,12 +51,24 @@ export const useProductFeed = createSharedComposable(() => {
 
       return response.data
     } catch (error) {
+      switch (type) {
+        case 'youtube':
+          isErrorOccurred.youtube = true
+          break
+        case 'github':
+          isErrorOccurred.github = true
+          break
+        case 'all':
+          isErrorOccurred.social = true
+          break
+      }
       console.error(error)
       return []
     }
   }
 
   return {
+    isErrorOccurred,
     activeTab,
     youtubeFeed,
     githubFeed,

packages/nc-gui/utils/iconUtils.ts

@@ -138,7 +138,7 @@ import NcCheckCircle from '~icons/nc-icons/check-circle'
 import NcCheckFill from '~icons/nc-icons/checkFill'
 import NcExternalLink from '~icons/nc-icons/external-link'
 import NcCamera from '~icons/nc-icons/camera'
-
+import NcRefreshCW from '~icons/nc-icons/refresh-cw'
 // import NcProjectGray from '~icons/nc-icons/project-gray'
 import NcPhoneCall from '~icons/nc-icons/phone-call'
 import NcItalic from '~icons/nc-icons/italic'
@@ -1078,6 +1078,7 @@ export const iconMap = {
   claude: NcClaude,
   ollama: NcOllama,
   groq: NcGroq,
+  refreshCw: NcRefreshCW,
 
   // Nc-IconsV2 Buttons
   ncColumns: NcColumnsIcon,