Merge pull request #1559 from nextcloud-libraries/fix/loader

nextcloud-libraries · Jan 22, 2025 · c8d084c · c8d084c
2 parents 13e995a + 241ce1d
commit c8d084c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/lib/toast.ts b/lib/toast.ts
@@ -10,6 +10,8 @@ import { t } from './utils/l10n.js'
 
 import '../styles/toast.scss'
 
+import LoaderSvg from '../styles/loader.svg?raw'
+
 /**
  * Enum of available Toast types
  */
@@ -204,7 +206,18 @@ export function showSuccess(text: string, options?: ToastOptions): Toast {
  * @param options
  */
 export function showLoading(text: string, options?: ToastOptions): Toast {
-	return showMessage(text, {
+	// Generate loader svg
+	const loader = document.createElement('span')
+	loader.innerHTML = LoaderSvg
+	loader.classList.add('toast-loader')
+
+	// Generate loader layout
+	const loaderContent = document.createElement('span')
+	loaderContent.classList.add('toast-loader-container')
+	loaderContent.innerText = text
+	loaderContent.appendChild(loader)
+
+	return showMessage(loaderContent, {
 		...options,
 		close: false,
 		timeout: TOAST_PERMANENT_TIMEOUT,

diff --git a/styles/toast.scss b/styles/toast.scss
@@ -20,9 +20,11 @@
 	align-items: center;
 	min-height: 50px;
 
+	.toast-loader-container,
 	.toast-undo-container {
 		display: flex;
 		align-items: center;
+		width: 100%;
 	}
 
 	.toast-undo-button,
@@ -106,12 +108,7 @@
 	&.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: ' ';
+		.toast-loader {
 			display: inline-block;
 			width: 20px;
 			height: 20px;