From 2001e3e03204b434fa9e6f5772a89030c2c67b27 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 24 May 2022 00:23:46 +0800
Subject: [PATCH 01/10] feat: introduce `<NuxtLoadingBar/>`

---
 .../src/app/components/nuxt-loading-bar.ts    | 90 +++++++++++++++++++
 packages/nuxt/src/core/nuxt.ts                |  6 ++
 2 files changed, 96 insertions(+)
 create mode 100644 packages/nuxt/src/app/components/nuxt-loading-bar.ts

diff --git a/packages/nuxt/src/app/components/nuxt-loading-bar.ts b/packages/nuxt/src/app/components/nuxt-loading-bar.ts
new file mode 100644
index 00000000000..346f94dc654
--- /dev/null
+++ b/packages/nuxt/src/app/components/nuxt-loading-bar.ts
@@ -0,0 +1,90 @@
+import { computed, defineComponent, h, onBeforeUnmount, ref } from 'vue'
+import { useNuxtApp } from '#app'
+
+export default defineComponent({
+  name: 'NuxtLoadingBar',
+  props: {
+    throttle: {
+      type: Number,
+      default: 200
+    },
+    duration: {
+      type: Number,
+      default: 2000
+    },
+    height: {
+      type: Number,
+      default: 3
+    },
+    color: {
+      type: String,
+      default: 'repeating-linear-gradient(to right,#00dc82 0%,#34cdfe 50%,#0047e1 100%)'
+    }
+  },
+  setup (props) {
+    const percent = ref(0)
+    const show = ref(false)
+    const step = computed(() => 10000 / props.duration)
+
+    let _timer: any = null
+    let _throttle: any = null
+
+    function clear () {
+      clearInterval(_timer)
+      clearTimeout(_throttle)
+      _timer = null
+      _throttle = null
+    }
+    function start () {
+      clear()
+      percent.value = 0
+      if (props.throttle) { _throttle = setTimeout(startTimer, props.throttle) } else { startTimer() }
+    }
+    function increase (num: number) {
+      percent.value = Math.min(100, percent.value + num)
+    }
+    function finish () {
+      percent.value = 100
+      hide()
+    }
+    function hide () {
+      clear()
+      setTimeout(() => {
+        show.value = false
+        setTimeout(() => {
+          percent.value = 0
+        }, 400)
+      }, 500)
+    }
+    function startTimer () {
+      show.value = true
+      _timer = setInterval(() => {
+        increase(step.value)
+      }, 100)
+    }
+
+    // Hooks
+    const nuxtApp = useNuxtApp()
+    nuxtApp.hook('page:start', start)
+    nuxtApp.hook('page:finish', finish)
+    onBeforeUnmount(() => clear)
+
+    return () => h('div', {
+      class: 'nuxt-progress',
+      style: {
+        position: 'fixed',
+        top: 0,
+        right: 0,
+        left: 0,
+        pointerEvents: 'none',
+        width: `${percent.value}%`,
+        height: `${props.height}px`,
+        opacity: show.value ? 1 : 0,
+        background: props.color,
+        backgroundSize: `${(100 / percent.value) * 100}% auto`,
+        transition: 'width 0.1s, height 0.4s, opacity 0.4s',
+        zIndex: 999999
+      }
+    })
+  }
+})
diff --git a/packages/nuxt/src/core/nuxt.ts b/packages/nuxt/src/core/nuxt.ts
index 205336a74ca..db4b1143ce7 100644
--- a/packages/nuxt/src/core/nuxt.ts
+++ b/packages/nuxt/src/core/nuxt.ts
@@ -109,6 +109,12 @@ async function initNuxt (nuxt: Nuxt) {
     filePath: resolve(nuxt.options.appDir, 'components/nuxt-link')
   })
 
+  // Add <NuxtLoadingBar>
+  addComponent({
+    name: 'NuxtLoadingBar',
+    filePath: resolve(nuxt.options.appDir, 'components/nuxt-loading-bar')
+  })
+
   for (const m of modulesToInstall) {
     if (Array.isArray(m)) {
       await installModule(m[0], m[1])

From 8ad718579d5c2fc3c4b4b5a3624a10a4d00ae4b4 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 24 May 2022 15:51:20 +0800
Subject: [PATCH 02/10] docs: update

---
 .../3.api/2.components/4.nuxt-loading-bar.md  | 35 +++++++++++++++++++
 examples/routing/pages/app.vue                |  1 +
 2 files changed, 36 insertions(+)
 create mode 100644 docs/content/3.api/2.components/4.nuxt-loading-bar.md

diff --git a/docs/content/3.api/2.components/4.nuxt-loading-bar.md b/docs/content/3.api/2.components/4.nuxt-loading-bar.md
new file mode 100644
index 00000000000..14307c234c9
--- /dev/null
+++ b/docs/content/3.api/2.components/4.nuxt-loading-bar.md
@@ -0,0 +1,35 @@
+# `<NuxtLoadingBar>`
+
+::ReadMore{link="/guide/features/routing"}
+::
+
+Nuxt provides `<NuxtLoadingBar>` to display a progress bar on page navigation.
+
+## Examples
+
+### Basic usage
+
+Add `<NuxtLoadingBar/>` in your `app.vue` or layouts.
+
+```vue [app.vue]
+<template>
+  <NuxtLayout>
+    <NuxtLoadingBar />
+    <NuxtPage />
+  <NuxtLayout>
+</template>
+```
+
+:button-link[Open on StackBlitz]{href="https://stackblitz.com/github/nuxt/framework/tree/main/examples/routing/pages?terminal=dev&file=/app.vue" blank}
+
+## Props
+
+- **color**: The color for loading bar.
+- **height**: Height of the loading bar, in pixels (deafult `3`).
+- **duration**: Duration of the loading bar, in milliseconds (default `2000`).
+- **throttle**: Throttle the appearing and hiding, in milliseconds (default `200`).
+
+::alert{type=info icon=🔎}
+This component is completely optional. To have full customization, you can implement one your own based on [this file](https://github.com/nuxt/framework/blob/main/packages/nuxt/src/app/components/nuxt-loading-bar.ts).
+::
+
diff --git a/examples/routing/pages/app.vue b/examples/routing/pages/app.vue
index 9f44a00aaa3..3ab0366b016 100644
--- a/examples/routing/pages/app.vue
+++ b/examples/routing/pages/app.vue
@@ -4,6 +4,7 @@ const route = useRoute()
 
 <template>
   <NuxtExampleLayout example="routing/pages">
+    <NuxtLoadingBar />
     <NuxtPage />
 
     <template #nav>

From 4c1b21d161ffc1ac78d4a631dd14bf0dd4e4a949 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 24 May 2022 15:54:06 +0800
Subject: [PATCH 03/10] chore: update

---
 docs/content/3.api/2.components/4.nuxt-loading-bar.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/3.api/2.components/4.nuxt-loading-bar.md b/docs/content/3.api/2.components/4.nuxt-loading-bar.md
index 14307c234c9..324f0f53c61 100644
--- a/docs/content/3.api/2.components/4.nuxt-loading-bar.md
+++ b/docs/content/3.api/2.components/4.nuxt-loading-bar.md
@@ -14,7 +14,7 @@ Add `<NuxtLoadingBar/>` in your `app.vue` or layouts.
 ```vue [app.vue]
 <template>
   <NuxtLayout>
-    <NuxtLoadingBar />
+    <NuxtLoadingBar /> <!-- here -->
     <NuxtPage />
   <NuxtLayout>
 </template>

From 868e21a00681ce862197a0c3210a813862057258 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 24 May 2022 16:16:38 +0800
Subject: [PATCH 04/10] chore: lint

---
 docs/content/3.api/2.components/4.nuxt-loading-bar.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/content/3.api/2.components/4.nuxt-loading-bar.md b/docs/content/3.api/2.components/4.nuxt-loading-bar.md
index 324f0f53c61..5d6bf728104 100644
--- a/docs/content/3.api/2.components/4.nuxt-loading-bar.md
+++ b/docs/content/3.api/2.components/4.nuxt-loading-bar.md
@@ -32,4 +32,3 @@ Add `<NuxtLoadingBar/>` in your `app.vue` or layouts.
 ::alert{type=info icon=🔎}
 This component is completely optional. To have full customization, you can implement one your own based on [this file](https://github.com/nuxt/framework/blob/main/packages/nuxt/src/app/components/nuxt-loading-bar.ts).
 ::
-

From 7dd48d57b7e6f2ffddc3c69245967d03ec75bd3a Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 24 May 2022 17:12:35 +0800
Subject: [PATCH 05/10] Update
 docs/content/3.api/2.components/4.nuxt-loading-bar.md

Co-authored-by: Damian <48835293+DamianGlowala@users.noreply.github.com>
---
 docs/content/3.api/2.components/4.nuxt-loading-bar.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/3.api/2.components/4.nuxt-loading-bar.md b/docs/content/3.api/2.components/4.nuxt-loading-bar.md
index 5d6bf728104..c8f04de1425 100644
--- a/docs/content/3.api/2.components/4.nuxt-loading-bar.md
+++ b/docs/content/3.api/2.components/4.nuxt-loading-bar.md
@@ -24,7 +24,7 @@ Add `<NuxtLoadingBar/>` in your `app.vue` or layouts.
 
 ## Props
 
-- **color**: The color for loading bar.
+- **color**: The color of the loading bar.
 - **height**: Height of the loading bar, in pixels (deafult `3`).
 - **duration**: Duration of the loading bar, in milliseconds (default `2000`).
 - **throttle**: Throttle the appearing and hiding, in milliseconds (default `200`).

From 8eeed2984f4fa1dc1568b48d0aa39854d514c038 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 24 May 2022 17:12:40 +0800
Subject: [PATCH 06/10] Update
 docs/content/3.api/2.components/4.nuxt-loading-bar.md

Co-authored-by: Damian <48835293+DamianGlowala@users.noreply.github.com>
---
 docs/content/3.api/2.components/4.nuxt-loading-bar.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/3.api/2.components/4.nuxt-loading-bar.md b/docs/content/3.api/2.components/4.nuxt-loading-bar.md
index c8f04de1425..0e6a408baca 100644
--- a/docs/content/3.api/2.components/4.nuxt-loading-bar.md
+++ b/docs/content/3.api/2.components/4.nuxt-loading-bar.md
@@ -25,7 +25,7 @@ Add `<NuxtLoadingBar/>` in your `app.vue` or layouts.
 ## Props
 
 - **color**: The color of the loading bar.
-- **height**: Height of the loading bar, in pixels (deafult `3`).
+- **height**: Height of the loading bar, in pixels (default `3`).
 - **duration**: Duration of the loading bar, in milliseconds (default `2000`).
 - **throttle**: Throttle the appearing and hiding, in milliseconds (default `200`).
 

From 3e6f764dfc684ceb22cd3054faeeb6cf5a1c6262 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 24 May 2022 17:12:48 +0800
Subject: [PATCH 07/10] Update
 docs/content/3.api/2.components/4.nuxt-loading-bar.md

Co-authored-by: Damian <48835293+DamianGlowala@users.noreply.github.com>
---
 docs/content/3.api/2.components/4.nuxt-loading-bar.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/3.api/2.components/4.nuxt-loading-bar.md b/docs/content/3.api/2.components/4.nuxt-loading-bar.md
index 0e6a408baca..294a955c032 100644
--- a/docs/content/3.api/2.components/4.nuxt-loading-bar.md
+++ b/docs/content/3.api/2.components/4.nuxt-loading-bar.md
@@ -30,5 +30,5 @@ Add `<NuxtLoadingBar/>` in your `app.vue` or layouts.
 - **throttle**: Throttle the appearing and hiding, in milliseconds (default `200`).
 
 ::alert{type=info icon=🔎}
-This component is completely optional. To have full customization, you can implement one your own based on [this file](https://github.com/nuxt/framework/blob/main/packages/nuxt/src/app/components/nuxt-loading-bar.ts).
+This component is completely optional. To achieve full customization, you can implement your own one based on [this file](https://github.com/nuxt/framework/blob/main/packages/nuxt/src/app/components/nuxt-loading-bar.ts).
 ::

From c451c03fc15396452cc9d9287a41145a151a290c Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 6 Jun 2022 14:56:41 +0800
Subject: [PATCH 08/10] chore: rename to `<NuxtLoadingIndicator/>`

---
 .../{nuxt-loading-bar.ts => nuxt-loading-indicator.ts}      | 4 ++--
 packages/nuxt/src/core/nuxt.ts                              | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)
 rename packages/nuxt/src/app/components/{nuxt-loading-bar.ts => nuxt-loading-indicator.ts} (96%)

diff --git a/packages/nuxt/src/app/components/nuxt-loading-bar.ts b/packages/nuxt/src/app/components/nuxt-loading-indicator.ts
similarity index 96%
rename from packages/nuxt/src/app/components/nuxt-loading-bar.ts
rename to packages/nuxt/src/app/components/nuxt-loading-indicator.ts
index 346f94dc654..7a9364503bd 100644
--- a/packages/nuxt/src/app/components/nuxt-loading-bar.ts
+++ b/packages/nuxt/src/app/components/nuxt-loading-indicator.ts
@@ -2,7 +2,7 @@ import { computed, defineComponent, h, onBeforeUnmount, ref } from 'vue'
 import { useNuxtApp } from '#app'
 
 export default defineComponent({
-  name: 'NuxtLoadingBar',
+  name: 'NuxtLoadingIndicator',
   props: {
     throttle: {
       type: Number,
@@ -70,7 +70,7 @@ export default defineComponent({
     onBeforeUnmount(() => clear)
 
     return () => h('div', {
-      class: 'nuxt-progress',
+      class: 'nuxt-loading-indicator',
       style: {
         position: 'fixed',
         top: 0,
diff --git a/packages/nuxt/src/core/nuxt.ts b/packages/nuxt/src/core/nuxt.ts
index db4b1143ce7..002e2633fbf 100644
--- a/packages/nuxt/src/core/nuxt.ts
+++ b/packages/nuxt/src/core/nuxt.ts
@@ -109,10 +109,10 @@ async function initNuxt (nuxt: Nuxt) {
     filePath: resolve(nuxt.options.appDir, 'components/nuxt-link')
   })
 
-  // Add <NuxtLoadingBar>
+  // Add <NuxtLoadingIndicator>
   addComponent({
-    name: 'NuxtLoadingBar',
-    filePath: resolve(nuxt.options.appDir, 'components/nuxt-loading-bar')
+    name: 'NuxtLoadingIndicator',
+    filePath: resolve(nuxt.options.appDir, 'components/nuxt-loading-indicator')
   })
 
   for (const m of modulesToInstall) {

From 1e3b4f7478c3d5d303c6a686b64ba65f8f26da57 Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pyapar@gmail.com>
Date: Mon, 13 Jun 2022 16:38:29 +0200
Subject: [PATCH 09/10] update leftover refs to bar

---
 ...{4.nuxt-loading-bar.md => 4.nuxt-loading-indicator.md} | 8 ++++----
 examples/routing/pages/app.vue                            | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)
 rename docs/content/3.api/2.components/{4.nuxt-loading-bar.md => 4.nuxt-loading-indicator.md} (80%)

diff --git a/docs/content/3.api/2.components/4.nuxt-loading-bar.md b/docs/content/3.api/2.components/4.nuxt-loading-indicator.md
similarity index 80%
rename from docs/content/3.api/2.components/4.nuxt-loading-bar.md
rename to docs/content/3.api/2.components/4.nuxt-loading-indicator.md
index 294a955c032..8989315c70c 100644
--- a/docs/content/3.api/2.components/4.nuxt-loading-bar.md
+++ b/docs/content/3.api/2.components/4.nuxt-loading-indicator.md
@@ -1,20 +1,20 @@
-# `<NuxtLoadingBar>`
+# `<NuxtLoadingIndicator>`
 
 ::ReadMore{link="/guide/features/routing"}
 ::
 
-Nuxt provides `<NuxtLoadingBar>` to display a progress bar on page navigation.
+Nuxt provides `<NuxtLoadingIndicator>` to display a progress bar on page navigation.
 
 ## Examples
 
 ### Basic usage
 
-Add `<NuxtLoadingBar/>` in your `app.vue` or layouts.
+Add `<NuxtLoadingIndicator/>` in your `app.vue` or layouts.
 
 ```vue [app.vue]
 <template>
   <NuxtLayout>
-    <NuxtLoadingBar /> <!-- here -->
+    <NuxtLoadingIndicator /> <!-- here -->
     <NuxtPage />
   <NuxtLayout>
 </template>
diff --git a/examples/routing/pages/app.vue b/examples/routing/pages/app.vue
index 3ab0366b016..8ffd82ba5dd 100644
--- a/examples/routing/pages/app.vue
+++ b/examples/routing/pages/app.vue
@@ -4,7 +4,7 @@ const route = useRoute()
 
 <template>
   <NuxtExampleLayout example="routing/pages">
-    <NuxtLoadingBar />
+    <NuxtLoadingIndicator />
     <NuxtPage />
 
     <template #nav>

From eac0b61abefd5b9ae693b4dc7021fdeb4490d3ba Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pooya@pi0.io>
Date: Thu, 7 Jul 2022 19:59:12 +0200
Subject: [PATCH 10/10] refactor into composable and small improvements

---
 .../app/components/nuxt-loading-indicator.ts  | 124 +++++++++++-------
 1 file changed, 77 insertions(+), 47 deletions(-)

diff --git a/packages/nuxt/src/app/components/nuxt-loading-indicator.ts b/packages/nuxt/src/app/components/nuxt-loading-indicator.ts
index 7a9364503bd..391c9ce8911 100644
--- a/packages/nuxt/src/app/components/nuxt-loading-indicator.ts
+++ b/packages/nuxt/src/app/components/nuxt-loading-indicator.ts
@@ -22,52 +22,17 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const percent = ref(0)
-    const show = ref(false)
-    const step = computed(() => 10000 / props.duration)
-
-    let _timer: any = null
-    let _throttle: any = null
-
-    function clear () {
-      clearInterval(_timer)
-      clearTimeout(_throttle)
-      _timer = null
-      _throttle = null
-    }
-    function start () {
-      clear()
-      percent.value = 0
-      if (props.throttle) { _throttle = setTimeout(startTimer, props.throttle) } else { startTimer() }
-    }
-    function increase (num: number) {
-      percent.value = Math.min(100, percent.value + num)
-    }
-    function finish () {
-      percent.value = 100
-      hide()
-    }
-    function hide () {
-      clear()
-      setTimeout(() => {
-        show.value = false
-        setTimeout(() => {
-          percent.value = 0
-        }, 400)
-      }, 500)
-    }
-    function startTimer () {
-      show.value = true
-      _timer = setInterval(() => {
-        increase(step.value)
-      }, 100)
-    }
+    const indicator = useLoadingIndicator({
+      duration: props.duration,
+      throttle: props.throttle
+    })
 
-    // Hooks
+    // Hook to app lifecycle
+    // TODO: Use unified loading API
     const nuxtApp = useNuxtApp()
-    nuxtApp.hook('page:start', start)
-    nuxtApp.hook('page:finish', finish)
-    onBeforeUnmount(() => clear)
+    nuxtApp.hook('page:start', indicator.start)
+    nuxtApp.hook('page:finish', indicator.finish)
+    onBeforeUnmount(() => indicator.clear)
 
     return () => h('div', {
       class: 'nuxt-loading-indicator',
@@ -77,14 +42,79 @@ export default defineComponent({
         right: 0,
         left: 0,
         pointerEvents: 'none',
-        width: `${percent.value}%`,
+        width: `${indicator.progress.value}%`,
         height: `${props.height}px`,
-        opacity: show.value ? 1 : 0,
+        opacity: indicator.isLoading.value ? 1 : 0,
         background: props.color,
-        backgroundSize: `${(100 / percent.value) * 100}% auto`,
+        backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`,
         transition: 'width 0.1s, height 0.4s, opacity 0.4s',
         zIndex: 999999
       }
     })
   }
 })
+
+function useLoadingIndicator (opts: {
+  duration: number,
+  throttle: number
+}) {
+  const progress = ref(0)
+  const isLoading = ref(false)
+  const step = computed(() => 10000 / opts.duration)
+
+  let _timer: any = null
+  let _throttle: any = null
+
+  function start () {
+    clear()
+    progress.value = 0
+    isLoading.value = true
+    if (opts.throttle) {
+      if (process.client) {
+        _throttle = setTimeout(_startTimer, opts.throttle)
+      }
+    } else {
+      _startTimer()
+    }
+  }
+
+  function finish () {
+    progress.value = 100
+    _hide()
+  }
+
+  function clear () {
+    clearInterval(_timer)
+    clearTimeout(_throttle)
+    _timer = null
+    _throttle = null
+  }
+
+  function _increase (num: number) {
+    progress.value = Math.min(100, progress.value + num)
+  }
+
+  function _hide () {
+    clear()
+    if (process.client) {
+      setTimeout(() => {
+        isLoading.value = false
+        setTimeout(() => { progress.value = 0 }, 400)
+      }, 500)
+    }
+  }
+
+  function _startTimer () {
+    if (process.client) {
+      _timer = setInterval(() => { _increase(step.value) }, 100)
+    }
+  }
+
+  return {
+    progress,
+    isLoading,
+    start,
+    finish,
+    clear
+  }
+}