From 258ea4baa0bcabfbba35a5297c6066c1e5e09675 Mon Sep 17 00:00:00 2001
From: David Featherston <david.featherstone@dpc.vic.gov.au>
Date: Fri, 18 Aug 2023 13:32:00 +1000
Subject: [PATCH] feat(@dpc-sdp/nuxt-ripple): add custom loading indicator

---
 packages/nuxt-ripple/app.vue                  |  2 +-
 .../components/TideLoadingIndicator.vue       | 72 +++++++++++++++++++
 2 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 packages/nuxt-ripple/components/TideLoadingIndicator.vue

diff --git a/packages/nuxt-ripple/app.vue b/packages/nuxt-ripple/app.vue
index dc8e762ab7..e1e242a4d7 100644
--- a/packages/nuxt-ripple/app.vue
+++ b/packages/nuxt-ripple/app.vue
@@ -1,6 +1,6 @@
 <template>
   <NuxtLayout>
-    <NuxtLoadingIndicator color="var(--rpl-clr-primary)" />
+    <TideLoadingIndicator />
     <NuxtPage />
   </NuxtLayout>
 </template>
diff --git a/packages/nuxt-ripple/components/TideLoadingIndicator.vue b/packages/nuxt-ripple/components/TideLoadingIndicator.vue
new file mode 100644
index 0000000000..30e3cb7290
--- /dev/null
+++ b/packages/nuxt-ripple/components/TideLoadingIndicator.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useRouter, useNuxtApp } from '#imports'
+
+interface Props {
+  delay?: number
+  duration?: number
+  height?: number
+  colour?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  delay: 200,
+  duration: 2000,
+  height: 3,
+  colour: 'var(--rpl-clr-primary)'
+})
+
+const router = useRouter()
+const nuxtApp = useNuxtApp()
+const progress = ref(0)
+const timer = ref(null)
+const throttle = ref(null)
+
+const start = () => {
+  if (typeof window !== 'undefined') {
+    throttle.value = setTimeout(() => {
+      timer.value = setInterval(() => {
+        if (progress.value < 100) progress.value += 1
+      }, props.duration / 100)
+    }, props.delay)
+  }
+}
+
+const finish = () => {
+  if (typeof window !== 'undefined') {
+    clearInterval(timer.value)
+    clearTimeout(throttle.value)
+
+    if (progress.value) progress.value = 100
+
+    setTimeout(() => (progress.value = 0), 100)
+  }
+}
+
+router.onError(finish)
+nuxtApp.hook('page:start', start)
+nuxtApp.hook('page:finish', finish)
+
+const style = computed(() => ({
+  height: `${props.height}px`,
+  background: props.colour,
+  opacity: progress.value ? 1 : 0,
+  transform: `scaleX(${progress.value}%)`
+}))
+</script>
+
+<template>
+  <div class="tide-loading-indicator" :style="style" />
+</template>
+
+<style>
+.tide-loading-indicator {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 999;
+  transform-origin: left;
+  transition: transform 0.1s;
+}
+</style>