Component: Button -> pButton

[webtimo-de]

Describe the bug

Hi, I noticed when I went from 17.18.0 to 17.18.1 that the pButton Loading is displayed incorrectly. If Loading is set to true, it displays correctly, but if it goes back to false, the button is no longer disabled, but the loading icon is still there. See image:

Loading:

17.18.0:
After Loading:

17.18.1:
After Loading:

Environment

{
    "name": "tracking",
    "version": "0.1.16",
    "scripts": {
        "ng": "ng",
        "start": "ng serve --host 0.0.0.0 --disable-host-check true --port 8000",
        "start:prod": "ng serve --host 0.0.0.0 --disable-host-check true --port 8000 -c production",
        "prebuild": "node node_modules/@tadmin/angular-version-check/script/prebuild.js",
        "prebuild:prod": "node node_modules/@tadmin/angular-version-check/script/prebuild.js",
        "build": "ng build",
        "build:prod": "ng build -c production",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "17.3.8",
        "@angular/cdk": "17.3.8",
        "@angular/common": "17.3.8",
        "@angular/compiler": "17.3.8",
        "@angular/core": "17.3.8",
        "@angular/forms": "17.3.8",
        "@angular/localize": "17.3.8",
        "@angular/platform-browser": "17.3.8",
        "@angular/platform-browser-dynamic": "17.3.8",
        "@angular/router": "17.3.8",
        "@fragaria/address-formatter": "^5.3.0",
        "@ng-bootstrap/ng-bootstrap": "^16.0.0",
        "@tadmin/angular-version-check": "^1.0.1",
        "@tadmin/local-storage-helper": "^1.0.1",
        "@tadmin/mapkit": "^0.0.11",
        "@tadmin/primeng-company-switch": "^0.0.11",
        "@tadmin/primeng-design": "^1.0.29",
        "@tadmin/subscription-manager": "^1.0.7",
        "@types/chart.js": "^2.9.41",
        "@types/moment": "^2.13.0",
        "chart.js": "4.4.1",
        "core-js": "3.36.0",
        "d3-scale": "4.0.2",
        "detect-dark-mode": "^0.0.2",
        "hammerjs": "^2.0.8",
        "humanize-url": "^3.0.0",
        "idb": "^8.0.0",
        "js-sha3": "^0.9.3",
        "jspdf": "^2.5.1",
        "jspdf-autotable": "^3.8.2",
        "libphonenumber-js": "^1.10.57",
        "localized-address-format": "^1.3.1",
        "md5-typescript": "^1.0.5",
        "moment": "^2.30.1",
        "moment-duration-format": "^2.3.2",
        "moment-range": "^4.0.2",
        "moment-timezone": "^0.5.45",
        "ngx-socket-io": "^4.6.1",
        "nominatim-ts": "^0.1.3",
        "primeflex": "^3.3.1",
        "primeicons": "^7.0.0",
        "primeng": "17.18.1",
        "rxjs": "^7.8.1",
        "similarity": "^1.2.1",
        "stream": "0.0.2",
        "sweetalert2": "^11.10.5",
        "tslib": "^2.6.2",
        "unit-converter": "^1.1.0",
        "zone.js": "0.14.5"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^17.3.7",
        "@angular/cli": "^17.3.7",
        "@angular/compiler-cli": "^17.3.8",
        "@angular/language-service": "^17.3.8",
        "@types/jasmine": "5.1.4",
        "@types/jasminewd2": "2.0.13",
        "@types/node": "20.12.11",
        "codelyzer": "6.0.2",
        "jasmine-core": "5.1.2",
        "jasmine-spec-reporter": "7.0.0",
        "karma": "6.4.3",
        "karma-chrome-launcher": "3.2.0",
        "karma-coverage-istanbul-reporter": "3.0.3",
        "karma-jasmine": "5.1.0",
        "karma-jasmine-html-reporter": "2.1.0",
        "mapkit-typescript": "^5.18.2",
        "protractor": "7.0.0",
        "ts-node": "10.9.2",
        "tslint": "6.1.3",
        "typescript": "5.4.5"
    }
}

Reproducer

No response

Angular version

17.3.8

PrimeNG version

17.18.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.17.1

Browser(s)

Firefox 127.0

Steps to reproduce the behavior

No response

Expected behavior

No response

[webtimo-de]

I think this is where the problem happened

SoyDiego:15736-fix-button

[webtimo-de]

                                <button pButton pRipple #btn
                                        class="p-button-info w-full" icon="pi pi-file-import"
                                        [loading]="loadingImport"
                                        (click)="import(btn)"
                                ></button>

[SoyDiego]

Please, share a stackblitz.
My solution in the PR was solving a problem and were tested for 2 people.
We didn't realize about that. Share a stackblitz and add in your first message because will help to the PrimeNG Team.

Thanks!

[webtimo-de]

Please, share a stackblitz. My solution in the PR was solving a problem and were tested for 2 people. We didn't realize about that. Share a stackblitz and add in your first message because will help to the PrimeNG Team.

Thanks!

I couldn't really reproduce this in Stackblitz. I tried to reduce this there before I opened the Issue.

I have only had this since the update to 17.18.1. At 17.18.0 it works without any problems. See the pictures.

And if I only change the version of PrimeNG, it can only be due to PrimeNG. And I just went through the PRs and saw that the loading icons were changed.

I use Lara as a design.

If you need more input to solve the problem, I will be happy to help.

[rosenthalj]

I have created a reproducer for this issue:
https://stackblitz.com/edit/tlmdgz?file=src%2Fapp%2Fbutton-loading-demo.html

The reproducer shows PrimeNG "loading" buttons. The first two buttons are the exact problem described in this Issue #15862. The 5th and 6 buttons show an additional issue with "loading". The 3rd, 4th, 7th, and 8th work properly?

The following video is running the reproducer:

buttonLoadingBug.mov

[rosenthalj]

I created an improved reproducer for this Issue #15862. The new reproducer is arranged better and adds 2 additional cases.

Improved reproducer: https://stackblitz.com/edit/tlmdgz-ctp3t6

The following video is running the new improved reproducer:

buttonLoadingProblem.mov

[mehmetcetin01140]

Fixed in #15893