From 447a48f306df7e6ab69340c47d8e576e3cbdcbb5 Mon Sep 17 00:00:00 2001
From: Aaron Klinker <aaronklinker1@gmail.com>
Date: Thu, 15 Feb 2024 10:37:53 -0600
Subject: [PATCH] docs: Add loading and error states for "Who's using WXT"
 section

---
 docs/.vitepress/components/UsingWxtSection.vue     | 14 ++++++++++++--
 .../composables/useListExtensionDetails.ts         |  4 ++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/docs/.vitepress/components/UsingWxtSection.vue b/docs/.vitepress/components/UsingWxtSection.vue
index 444a27cb..3540f1fa 100644
--- a/docs/.vitepress/components/UsingWxtSection.vue
+++ b/docs/.vitepress/components/UsingWxtSection.vue
@@ -20,11 +20,12 @@ const chromeExtensionIds = [
   'agjnjboanicjcpenljmaaigopkgdnihi', // PreMiD
 ];
 
-const { data } = useListExtensionDetails(chromeExtensionIds);
+const { data, err, isLoading } = useListExtensionDetails(chromeExtensionIds);
 const sortedExtensions = computed(() => {
   if (!data.value?.length) return [];
 
   return [...data.value]
+    .filter((item) => item != null)
     .map((item) => ({
       ...item,
       // Sort based on the user count weighted by the rating
@@ -49,7 +50,16 @@ function getStoreUrl(extension: ChromeExtension) {
         Battle tested and ready for production. Explore chrome extensions made
         with WXT.
       </p>
-      <ul>
+      <p v-if="isLoading" style="text-align: center; opacity: 50%">
+        Loading...
+      </p>
+      <p
+        v-else-if="err || sortedExtensions.length === 0"
+        style="text-align: center; opacity: 50%"
+      >
+        Failed to load extension details.
+      </p>
+      <ul v-else>
         <li
           v-for="extension of sortedExtensions"
           :key="extension.id"
diff --git a/docs/.vitepress/composables/useListExtensionDetails.ts b/docs/.vitepress/composables/useListExtensionDetails.ts
index 7d64ad27..96477127 100644
--- a/docs/.vitepress/composables/useListExtensionDetails.ts
+++ b/docs/.vitepress/composables/useListExtensionDetails.ts
@@ -26,6 +26,7 @@ const query = `query ${operationName}($ids:[String!]!) {
 export default function (ids: string[]) {
   const data = ref<ChromeExtension[]>();
   const err = ref<unknown>();
+  const isLoading = ref(true);
 
   fetch('https://queue.wxt.dev/api', {
     method: 'POST',
@@ -36,6 +37,7 @@ export default function (ids: string[]) {
     }),
   })
     .then(async (res) => {
+      isLoading.value = false;
       const {
         data: { chromeExtensions },
       } = await res.json();
@@ -43,6 +45,7 @@ export default function (ids: string[]) {
       err.value = undefined;
     })
     .catch((error) => {
+      isLoading.value = false;
       console.error(error);
       data.value = undefined;
       err.value = error;
@@ -51,5 +54,6 @@ export default function (ids: string[]) {
   return {
     data,
     err,
+    isLoading,
   };
 }