From 44e611233554524d6af447224a8ba74dcb2b1d5d Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Thu, 16 May 2024 20:47:49 -1000
Subject: [PATCH] feat: :sparkles: Show spinner while OIDC account linking is
 loading

---
 components/loading.vue                | 2 +-
 components/notifications/Renderer.vue | 4 +++-
 composables/EventBus.ts               | 2 +-
 layouts/app.vue                       | 6 ++++++
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/loading.vue b/components/loading.vue
index 0e46cd4..5b13be8 100644
--- a/components/loading.vue
+++ b/components/loading.vue
@@ -60,7 +60,7 @@ app.hook("page:finish", async () => {
 
     if (oidcAccountLinked) {
         useEvent("notification:new", {
-            type: "info",
+            type: "success",
             title: "Account linked",
             message:
                 "Your account has been successfully linked to your OpenID Connect provider.",
diff --git a/components/notifications/Renderer.vue b/components/notifications/Renderer.vue
index 566b8ed..0ab9669 100644
--- a/components/notifications/Renderer.vue
+++ b/components/notifications/Renderer.vue
@@ -13,10 +13,12 @@
                     <div class="p-4">
                         <div class="flex items-start">
                             <div class="shrink-0 h-6 w-6">
-                                <iconify-icon v-if="notification.type === 'info'" icon="tabler:check" height="none"
+                                <iconify-icon v-if="notification.type === 'success'" icon="tabler:check" height="none"
                                     class="h-6 w-6 text-green-400" aria-hidden="true" />
                                 <iconify-icon v-else-if="notification.type === 'error'" icon="tabler:alert-triangle"
                                     height="none" class="h-6 w-6 text-red-400" aria-hidden="true" />
+                                <iconify-icon v-else-if="notification.type === 'progress'" icon="tabler:loader"
+                                    height="none" class="h-6 w-6 text-pink-500 animate-spin" aria-hidden="true" />
                             </div>
                             <div class="ml-3 w-0 flex-1 pt-0.5">
                                 <p class="text-sm font-semibold text-gray-50">{{ notification.title }}</p>
diff --git a/composables/EventBus.ts b/composables/EventBus.ts
index e13f614..b0aa5a7 100644
--- a/composables/EventBus.ts
+++ b/composables/EventBus.ts
@@ -2,7 +2,7 @@ import mitt from "mitt";
 import type { Status } from "~/types/mastodon/status";
 
 export type NotificationEvent = {
-    type: "error" | "info";
+    type: "error" | "success" | "progress";
     title: string;
     message?: string;
     persistent?: boolean;
diff --git a/layouts/app.vue b/layouts/app.vue
index f101786..6e8cb1e 100644
--- a/layouts/app.vue
+++ b/layouts/app.vue
@@ -56,6 +56,12 @@ watchEffect(async () => {
         useEvent("composer:open");
     }
     if (o_i_d_c.value) {
+        useEvent("notification:new", {
+            type: "progress",
+            title: "Linking your account",
+            persistent: true,
+        });
+
         const issuer = providers.value?.providers[0];
 
         if (!issuer) {