From dee1381a79cc1aa86aab07f3fda108db5de8d991 Mon Sep 17 00:00:00 2001
From: skjnldsv <skjnldsv@protonmail.com>
Date: Tue, 21 Jan 2025 16:44:24 +0100
Subject: [PATCH] feat(toast): add loading toast

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>
---
 REUSE.toml        |  2 +-
 lib/index.ts      |  1 +
 lib/toast.ts      | 19 ++++++++++++++++++-
 styles/loader.svg |  7 +++++++
 styles/toast.scss | 18 ++++++++++++++++++
 5 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 styles/loader.svg

diff --git a/REUSE.toml b/REUSE.toml
index a1918f63..bfe22718 100644
--- a/REUSE.toml
+++ b/REUSE.toml
@@ -24,7 +24,7 @@ SPDX-FileCopyrightText = "2023 Nextcloud GmbH and Nextcloud contributors"
 SPDX-License-Identifier = "AGPL-3.0-or-later"
 
 [[annotations]]
-path = ["styles/close-dark.svg", "styles/close.svg"]
+path = ["styles/close-dark.svg", "styles/close.svg", "styles/loader.svg"]
 precedence = "aggregate"
 SPDX-FileCopyrightText = "2018-2024 Google LLC"
 SPDX-License-Identifier = "Apache-2.0"
diff --git a/lib/index.ts b/lib/index.ts
index 768670c6..9e6ed6d9 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -26,6 +26,7 @@ export {
 	showInfo,
 	showError,
 	showUndo,
+	showLoading,
 } from './toast.js'
 
 export type {
diff --git a/lib/toast.ts b/lib/toast.ts
index 2b55a259..34329bed 100644
--- a/lib/toast.ts
+++ b/lib/toast.ts
@@ -20,6 +20,7 @@ export enum ToastType {
 	SUCCESS = 'toast-success',
 	PERMANENT = 'toast-error',
 	UNDO = 'toast-undo',
+	LOADING = 'toast-loading',
 }
 
 /** @deprecated Use ToastAriaLive.OFF */
@@ -195,6 +196,22 @@ export function showSuccess(text: string, options?: ToastOptions): Toast {
 	return showMessage(text, { ...options, type: ToastType.SUCCESS })
 }
 
+/**
+ * Show a toast message with a loading spinner
+ * The toast will be shown permanently and needs to be hidden manually by calling hideToast()
+ *
+ * @param text Message to be shown in the toast, any HTML is removed by default
+ * @param options
+ */
+export function showLoading(text: string, options?: ToastOptions): Toast {
+	return showMessage(text, {
+		...options,
+		close: false,
+		timeout: TOAST_PERMANENT_TIMEOUT,
+		type: ToastType.LOADING,
+	})
+}
+
 /**
  * Show a toast message with undo styling
  *
@@ -214,7 +231,7 @@ export function showUndo(text: string, onUndo: (e: MouseEvent) => void, options?
 		// force 10 seconds of timeout
 		timeout: TOAST_UNDO_TIMEOUT,
 		// remove close button
-		close: false
+		close: false,
 	})
 
 	// Generate undo layout
diff --git a/styles/loader.svg b/styles/loader.svg
new file mode 100644
index 00000000..0d48a53f
--- /dev/null
+++ b/styles/loader.svg
@@ -0,0 +1,7 @@
+<svg width="20"
+	height="20"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg">
+	<path fill="var(--color-loading-light)" d="M12,4V2A10,10 0 1,0 22,12H20A8,8 0 1,1 12,4Z" />
+	<path fill="var(--color-loading-dark)" d="M12,4V2A10,10 0 0,1 22,12H20A8,8 0 0,0 12,4Z" />
+</svg>
diff --git a/styles/toast.scss b/styles/toast.scss
index bed42f96..a530db30 100644
--- a/styles/toast.scss
+++ b/styles/toast.scss
@@ -18,6 +18,7 @@
 	border-radius: var(--border-radius);
 	display: flex;
 	align-items: center;
+	min-height: 50px;
 
 	.toast-undo-container {
 		display: flex;
@@ -101,6 +102,23 @@
 	&.toast-undo {
 		border-left: 3px solid var(--color-success);
 	}
+
+	&.toast-loading {
+		border-left: 3px solid var(--color-primary);
+
+		&::after {
+			background-image: url('./loader.svg');
+			background-repeat: no-repeat;
+			background-position: center;
+			background-color: transparent;
+			content: ' ';
+			display: inline-block;
+			width: 20px;
+			height: 20px;
+			animation: rotate var(--animation-duration, 0.8s) linear infinite;
+			margin-left: auto;
+		}
+	}
 }
 
 /* dark theme overrides for Nextcloud 24 and earlier */