fixed handling of spinning icon when loading

primefaces · Jun 24, 2024 · 4859eb2 · 4859eb2
1 parent 1a7c2cf
commit 4859eb2
Showing 1 changed file with 1 addition and 32 deletions.
diff --git a/src/app/components/button/button.ts b/src/app/components/button/button.ts
@@ -155,20 +155,6 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
 
     private _internalClasses: string[] = Object.values(INTERNAL_BUTTON_CLASSES);
 
-    spinnerIcon = `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="p-icon-spin">
-        <g clip-path="url(#clip0_417_21408)">
-            <path
-                d="M6.99701 14C5.85441 13.999 4.72939 13.7186 3.72012 13.1832C2.71084 12.6478 1.84795 11.8737 1.20673 10.9284C0.565504 9.98305 0.165424 8.89526 0.041387 7.75989C-0.0826496 6.62453 0.073125 5.47607 0.495122 4.4147C0.917119 3.35333 1.59252 2.4113 2.46241 1.67077C3.33229 0.930247 4.37024 0.413729 5.4857 0.166275C6.60117 -0.0811796 7.76026 -0.0520535 8.86188 0.251112C9.9635 0.554278 10.9742 1.12227 11.8057 1.90555C11.915 2.01493 11.9764 2.16319 11.9764 2.31778C11.9764 2.47236 11.915 2.62062 11.8057 2.73C11.7521 2.78503 11.688 2.82877 11.6171 2.85864C11.5463 2.8885 11.4702 2.90389 11.3933 2.90389C11.3165 2.90389 11.2404 2.8885 11.1695 2.85864C11.0987 2.82877 11.0346 2.78503 10.9809 2.73C9.9998 1.81273 8.73246 1.26138 7.39226 1.16876C6.05206 1.07615 4.72086 1.44794 3.62279 2.22152C2.52471 2.99511 1.72683 4.12325 1.36345 5.41602C1.00008 6.70879 1.09342 8.08723 1.62775 9.31926C2.16209 10.5513 3.10478 11.5617 4.29713 12.1803C5.48947 12.7989 6.85865 12.988 8.17414 12.7157C9.48963 12.4435 10.6711 11.7264 11.5196 10.6854C12.3681 9.64432 12.8319 8.34282 12.8328 7C12.8328 6.84529 12.8943 6.69692 13.0038 6.58752C13.1132 6.47812 13.2616 6.41667 13.4164 6.41667C13.5712 6.41667 13.7196 6.47812 13.8291 6.58752C13.9385 6.69692 14 6.84529 14 7C14 8.85651 13.2622 10.637 11.9489 11.9497C10.6356 13.2625 8.85432 14 6.99701 14Z"
-                fill="currentColor"
-            />
-        </g>
-        <defs>
-            <clipPath id="clip0_417_21408">
-                <rect width="14" height="14" fill="white" />
-            </clipPath>
-        </defs>
-    </svg>`;
-
     constructor(
         public el: ElementRef,
         @Inject(DOCUMENT) private document: Document
@@ -280,10 +266,6 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
                 DomHandler.addMultipleClasses(iconElement, iconClass);
             }
 
-            if (!this.loadingIcon && this.loading) {
-                iconElement.innerHTML = this.spinnerIcon;
-            }
-
             this.htmlElement.insertBefore(iconElement, this.htmlElement.firstChild);
         }
     }
@@ -303,19 +285,6 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
         let iconElement = DomHandler.findSingle(this.htmlElement, '.p-button-icon');
         let labelElement = DomHandler.findSingle(this.htmlElement, '.p-button-label');
 
-        if (this.loading) {
-            if (!this.loadingIcon && iconElement) {
-                iconElement.innerHTML = this.spinnerIcon;
-            } else if (this.loadingIcon && iconElement) {
-                iconElement.className = `p-button-icon ${this.loadingIcon}`;
-            }
-        } else if (this.icon && iconElement) {
-            iconElement.className = `p-button-icon ${this.icon}`;
-        } else if (iconElement) {
-            iconElement.innerHTML = '';
-            this.createIcon();
-        }
-
         if (iconElement) {
             if (this.iconPos) {
                 iconElement.className = 'p-button-icon ' + (labelElement ? 'p-button-icon-' + this.iconPos : '') + ' ' + this.getIconClass();
@@ -328,7 +297,7 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
     }
 
     getIconClass() {
-        return this.loading ? 'p-button-loading-icon ' + (this.loadingIcon ? this.loadingIcon : 'p-icon') : this.icon || 'p-hidden';
+        return this.loading ? 'p-button-loading-icon pi-spin ' + (this.loadingIcon ?? 'pi pi-spinner') : this.icon || 'p-hidden';
     }
 
     ngOnDestroy() {