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

Author: skjnldsv

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,

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;