feat: add error handling for link loading

Improves reliability of link loading functionality:
- Adds error state and handling for failed API requests
- Implements retry mechanism with user-facing error message
- Prevents infinite loading when errors occur
- Defers search API call to mounted hook

These changes enhance user experience by providing clear feedback and recovery options when link loading fails.

components/dashboard/links/Index.vue

@@ -6,23 +6,37 @@ const links = ref([])
 const limit = 24
 let cursor = ''
 let listComplete = false
+let listError = false
 
 async function getLinks() {
-  const data = await useAPI('/api/link/list', {
+  try {
-    query: {
+    const data = await useAPI('/api/link/list', {
-      limit,
+      query: {
-      cursor,
+        limit,
-    },
+        cursor,
-  })
+      },
-  links.value = links.value.concat(data.links).filter(Boolean) // Sometimes cloudflare will return null, filter out
+    })
-  cursor = data.cursor
+    links.value = links.value.concat(data.links).filter(Boolean) // Sometimes cloudflare will return null, filter out
-  listComplete = data.list_complete
+    cursor = data.cursor
+    listComplete = data.list_complete
+    listError = false
+  }
+  catch (error) {
+    console.error(error)
+    listError = true
+  }
 }
 
 const { isLoading } = useInfiniteScroll(
   document,
   getLinks,
-  { distance: 150, interval: 1000, canLoadMore: () => !listComplete },
+  {
+    distance: 150,
+    interval: 1000,
+    canLoadMore: () => {
+      return !listError && !listComplete
+    },
+  },
 )
 
 function updateLinkList(link, type) {
@@ -68,5 +82,14 @@ function updateLinkList(link, type) {
     >
       No more
     </div>
+    <div
+      v-if="listError"
+      class="flex items-center justify-center text-sm"
+    >
+      Loading links failed,
+      <Button variant="link" @click="getLinks">
+        Try again
+      </Button>
+    </div>
   </main>
 </template>

components/dashboard/links/Search.vue

@@ -8,7 +8,7 @@ const isOpen = ref(false)
 const searchTerm = ref('')
 const selectedLink = ref(null)
 
-const links = await useAPI('/api/link/search')
+const links = ref([])
 
 const { results: filteredLinks } = useFuse(searchTerm, links, {
   fuseOptions: {
@@ -37,6 +37,14 @@ function selectLink(link) {
     query: { slug: link.slug },
   })
 }
+
+async function getLinks() {
+  links.value = await useAPI('/api/link/search')
+}
+
+onMounted(() => {
+  getLinks()
+})
 </script>
 
 <template>