feat: add loading indicator for URL inspection requests (#63)

* Initial plan for issue

* Initial exploration and linting fixes

Co-authored-by: serhalp <[email protected]>

* Add loading indicator for URL inspection requests

Co-authored-by: serhalp <[email protected]>

* Fix linting issues in test file

Co-authored-by: serhalp <[email protected]>

* Fix TypeScript errors and remove package-lock.json

- Replace $fetch with native fetch to resolve TypeScript stack depth errors
- Remove package-lock.json since project uses pnpm
- Add jsdom environment directive to component tests
- Fix linting issues (trailing spaces and indentation)

Co-authored-by: serhalp <[email protected]>

* Improve test descriptions to be more specific and descriptive

Co-authored-by: serhalp <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: serhalp <[email protected]>

Author: Copilot

app/components/RequestForm.test.ts

@@ -0,0 +1,46 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import RequestForm from './RequestForm.vue'
+
+describe('RequestForm', () => {
+  it('displays "Inspect" button text when not in loading state', () => {
+    const wrapper = mount(RequestForm)
+    expect(wrapper.find('button').text()).toBe('Inspect')
+  })
+
+  it('displays "Inspecting..." button text when in loading state', () => {
+    const wrapper = mount(RequestForm, {
+      props: { loading: true },
+    })
+    expect(wrapper.find('button').text()).toBe('Inspecting...')
+  })
+
+  it('disables button when loading', () => {
+    const wrapper = mount(RequestForm, {
+      props: { loading: true },
+    })
+    expect(wrapper.find('button').attributes('disabled')).toBeDefined()
+  })
+
+  it('does not disable button when not loading', () => {
+    const wrapper = mount(RequestForm)
+    expect(wrapper.find('button').attributes('disabled')).toBeUndefined()
+  })
+
+  it('emits submit event when not loading', async () => {
+    const wrapper = mount(RequestForm)
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.emitted('submit')).toBeTruthy()
+  })
+
+  it('does not emit submit event when loading', async () => {
+    const wrapper = mount(RequestForm, {
+      props: { loading: true },
+    })
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.emitted('submit')).toBeFalsy()
+  })
+})

app/components/RequestForm.vue

@@ -3,9 +3,15 @@ const inputUrl = ref(
   'https://nextjs-netlify-durable-cache-demo.netlify.app/isr-page',
 )
 
+const props = defineProps<{
+  loading?: boolean
+}>()
+
 const emit = defineEmits(['submit'])
 
 const handleSubmit = () => {
+  if (props.loading) return
+
   if (!inputUrl.value.startsWith('http')) {
     inputUrl.value = `https://${inputUrl.value}`
   }
@@ -23,8 +29,11 @@ const handleSubmit = () => {
         @keyup.enter="handleSubmit()"
       />
     </label>
-    <button @click="handleSubmit()">
-      Inspect
+    <button
+      :disabled="props.loading"
+      @click="handleSubmit()"
+    >
+      {{ props.loading ? 'Inspecting...' : 'Inspect' }}
     </button>
   </div>
 </template>

app/pages/index.vue

@@ -10,6 +10,7 @@ interface Run {
 
 const runs = ref<Run[]>([])
 const error = ref<string | null>(null)
+const loading = ref<boolean>(false)
 
 // TODO(serhalp) Improve types
 type ApiRun = Omit<Run, 'cacheHeaders'> & { headers: Record<string, string> }
@@ -23,14 +24,21 @@ const handleRequestFormSubmit = async ({
 }: {
   url: string
 }): Promise<void> => {
+  loading.value = true
   try {
-    const responseBody: ApiRun = await $fetch(
-      '/api/inspect-url',
-      {
-        method: 'POST',
-        body: { url },
+    const response = await fetch('/api/inspect-url', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
       },
-    )
+      body: JSON.stringify({ url }),
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`)
+    }
+
+    const responseBody: ApiRun = await response.json()
     runs.value.push(getRunFromApiRun(responseBody))
     error.value = null
   }
@@ -42,6 +50,9 @@ const handleRequestFormSubmit = async ({
       ?? new Error(`Fetch error: ${err}`)
     return
   }
+  finally {
+    loading.value = false
+  }
 }
 
 const handleClickClear = (): void => {
@@ -51,7 +62,17 @@ const handleClickClear = (): void => {
 
 <template>
   <main>
-    <RequestForm @submit="handleRequestFormSubmit" />
+    <RequestForm
+      :loading="loading"
+      @submit="handleRequestFormSubmit"
+    />
+
+    <div
+      v-if="loading"
+      class="loading-indicator"
+    >
+      ⏳ Inspecting URL...
+    </div>
 
     <div
       v-if="error"
@@ -80,6 +101,13 @@ const handleClickClear = (): void => {
 </template>
 
 <style scoped>
+.loading-indicator {
+  text-align: center;
+  padding: 1em;
+  color: var(--blue-600, #2563eb);
+  font-weight: 500;
+}
+
 .error {
   color: var(--red-400);
 }

app/pages/run/[runId].vue

@@ -10,6 +10,7 @@ interface Run {
 
 const runs = ref<Run[]>([])
 const error = ref<string | null>(null)
+const loading = ref<boolean>(false)
 
 // TODO(serhalp) Improve types
 type ApiRun = Omit<Run, 'cacheHeaders'> & { headers: Record<string, string> }
@@ -23,7 +24,11 @@ const route = useRoute()
 const { data: initialRuns, pending: _pending, error: preloadedRunsError } = await useAsyncData('preloadedRuns', async (): Promise<Run[]> => {
   const { runId } = route.params
   if (typeof runId === 'string') {
-    const responseBody: ApiRun = await $fetch(`/api/runs/${runId}`)
+    const response = await fetch(`/api/runs/${runId}`)
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`)
+    }
+    const responseBody: ApiRun = await response.json()
     return [getRunFromApiRun(responseBody)]
   }
   return []
@@ -40,14 +45,21 @@ const handleRequestFormSubmit = async ({
 }: {
   url: string
 }): Promise<void> => {
+  loading.value = true
   try {
-    const responseBody: ApiRun = await $fetch(
-      '/api/inspect-url',
-      {
-        method: 'POST',
-        body: { url },
+    const response = await fetch('/api/inspect-url', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
       },
-    )
+      body: JSON.stringify({ url }),
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`)
+    }
+
+    const responseBody: ApiRun = await response.json()
     runs.value.push(getRunFromApiRun(responseBody))
     error.value = null
   }
@@ -59,6 +71,9 @@ const handleRequestFormSubmit = async ({
       ?? new Error(`Fetch error: ${err}`)
     return
   }
+  finally {
+    loading.value = false
+  }
 }
 
 const handleClickClear = (): void => {
@@ -68,7 +83,17 @@ const handleClickClear = (): void => {
 
 <template>
   <main>
-    <RequestForm @submit="handleRequestFormSubmit" />
+    <RequestForm
+      :loading="loading"
+      @submit="handleRequestFormSubmit"
+    />
+
+    <div
+      v-if="loading"
+      class="loading-indicator"
+    >
+      ⏳ Inspecting URL...
+    </div>
 
     <div
       v-if="error"
@@ -97,6 +122,13 @@ const handleClickClear = (): void => {
 </template>
 
 <style scoped>
+.loading-indicator {
+  text-align: center;
+  padding: 1em;
+  color: var(--blue-600, #2563eb);
+  font-weight: 500;
+}
+
 .error {
   color: var(--red-400);
 }