bug: Refresher Content's icon on IOS won't show up properly unless the refresh's processing

[JasinRefiku]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

The refreshing icon will not show up properly unless the refresh's already being processed.

https://github.com/ionic-team/ionic-framework/assets/93801443/a575878b-cb06-43db-a159-cf31a41f061a

Expected Behavior

The icon should show up properly as soon as the user starts pulling up/down.

Steps to Reproduce

Use an ion-refresher-content, and start pulling up/down on IOS mode.

Code Reproduction URL

https://stackblitz.com/~/github.com/JasinRefiku/ionic-bug-reports

Ionic Info

Ionic:

   Ionic CLI                     : 7.1.5 REDACTED
   Ionic Framework               : @ionic/angular 7.7.1
   @angular-devkit/build-angular : 17.1.3
   @angular-devkit/schematics    : 17.1.3
   @angular/cli                  : 17.1.3
   @ionic/angular-toolkit        : 9.0.0

Capacitor:

   Capacitor CLI      : 5.7.0
   @capacitor/android : 5.7.0
   @capacitor/core    : 5.7.0
   @capacitor/ios     : 5.7.0

Utility:

   cordova-res : not installed globally
   native-run  : 2.0.1

System:

   NodeJS : v20.9.0 (C:\Program Files\nodejs\node.exe)
   npm    : 10.1.0
   OS     : Windows 10

Additional Information

No response

[Odas0R]

I have the same bug.

"@ionic/core": "^7.7.3",

In the docs is also broken:

Screencast from 03-28-2024 04:20:23 PM.webm