feat(toast): add loading toast

Signed-off-by: skjnldsv <[email protected]>

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"

lib/index.ts

@@ -26,6 +26,7 @@ export {
 	showInfo,
 	showError,
 	showUndo,
+	showLoading,
 } from './toast.js'
 
 export type {

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

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 */