No animation is displayed on Angular

[Sunderik]

Which platform(s) does your issue occur on?

• Android
• iOS/Android versions
• emulator or device. honor 10 lite

Please, provide the following version numbers that your issue occurs with:

• CLI: 6.0.2
• Cross-platform modules: 6.0.1
• Runtime(s): 6.0.0
• Plugin(s):

"dependencies": {
"@angular/animations": "8.0.0",
"@angular/common": "8.0.0",
"@angular/compiler": "8.0.0",
"@angular/core": "8.0.0",
"@angular/forms": "8.0.0",
"@angular/http": "8.0.0-beta.10",
"@angular/platform-browser": "8.0.0",
"@angular/platform-browser-dynamic": "8.0.0",
"@angular/router": "8.0.0",
"@nstudio/nativescript-loading-indicator": "^1.0.0",
"class-transformer": "^0.2.0",
"nativescript-angular": "8.0.2",
"nativescript-background-http": "^3.4.0",
"nativescript-camera": "^4.4.0",
"nativescript-cardview": "^3.1.1",
"nativescript-drop-down": "^5.0.2",
"nativescript-floatingactionbutton": "^5.0.3",
"nativescript-geolocation": "^5.0.0",
"nativescript-loading-indicator": "^2.5.1",
"nativescript-localstorage": "^2.0.0",
"nativescript-photoviewer": "^2.1.1",
"nativescript-plugin-firebase": "9.0.2",
"nativescript-ripple": "^2.2.1",
"nativescript-sentry": "^1.9.1",
"nativescript-theme-core": "^1.0.4",
"nativescript-ui-dataform": "5.0.0",
"nativescript-ui-listview": "7.0.0",
"nativescript-ui-sidedrawer": "7.0.0",
"reflect-metadata": "^0.1.13",
"rxjs": "~6.3.0",
"tns-core-modules": "6.0.1",
"uglifyjs-webpack-plugin": "^2.1.3",
"zone.js": "0.9.1"
},
"devDependencies": {
"@angular/compiler-cli": "8.0.0",
"@nativescript/schematics": "~0.5.0",
"@ngtools/webpack": "8.0.0",
"codelyzer": "~4.5.0",
"nativescript-dev-webpack": "1.0.1",
"tslint": "~5.11.0",
"tns-platform-declarations": "6.0.1",
"node-sass": "4.12.0",
"typescript": "3.4.5"
}

Is there any code involved?

###Service with the loading indicator
`
import { LoadingIndicator, Mode, OptionsCommon } from '@nstudio/nativescript-loading-indicator';
import { Injectable } from "@angular/core";

@Injectable({
providedIn: 'root',
})
export class LoadingIndicatorHelper {
public loader = new LoadingIndicator();
public options: OptionsCommon = {
message: 'Loading...',
details: 'Additional detail note!',
progress: 0.65,
margin: 10,
dimBackground: true,
color: '#4B9ED6',
backgroundColor: 'yellow',
userInteractionEnabled: false,
hideBezel: true,
mode: Mode.AnnularDeterminate,
android: {
cancelable: true,
cancelListener: function (dialog) {
console.log('Loading cancelled');
}
},
};
}###Show of the indicator in components that.loadingIndicator.loader.show(that.loadingIndicator.options);`

Results

[bradmartin]

Can you try a different Mode value?

[Sunderik]

tried to change the modes, but all have no animation

[Giovanni2293]

Hello, im having this same issue. Im trying to find the option where is a circle animation instead of a bar. Actually the bar works with animation (mode:indeterminate) but i need a Circle, how can i achieve that? because the only circle option is the one reported here and it doesn't have animation. Thank you

[alonstar]

I have the same issue, too. I'm using nativescript 6.0.1 + angular 8.2

[felixkrautschuk]

I have the same issue using NS 6.1 without Angular, but for me the issue occurs only on Android 4 devices

[bradmartin]

Must be an Android version issue. I've got this working fine in a NS 6.1 angular app running on Android 21+

[bradmartin]

Maybe there is an API being used internally not available on lower Android version. Can anyone confirm the results across different Android OS versions

[felixkrautschuk]

@bradmartin I re-tested this behaviour using the demo app on multiple Android devices and emulators and Mode.Indeterminate works as expected on our test devices with Android 5, 6, 7, 8, 9 and Q, but it does not work on Android 4.2, 4.3 and 4.4 devices and emulators (it just shows a circle without any animated spinner)

[bradmartin]

that's good to know 👍 - no promises from me on when I can look at it. However, that seems to indicate some API we're using internally in the android side doesn't work on Android 4x so we should be able to find a workaround or... drop support 😄. Hate to but ugh when it comes to that old of Android 🙃

[felixkrautschuk]

@bradmartin I made one more investigation and I found out, that the animation works on Mode.Indeterminate for Android 4 devices, if you define backgroundColor OR color in the options, not both at the same time 😄

[bradmartin]

If you have an idea to propose a fix, be glad to help sort thru it for a PR with you 👍

[edrick27]

i have the same problems when i run the APP get this error
node_modules/@nstudio/nativescript-loading-indicator/index.d.ts(77,10): error TS2304: Cannot find name 'UIView'

[bradmartin]

@edrick27 your issue is that your app is looking in node_modules when it shouldn't be analyzing those type defs. skipLibCheck: true should be in your tsconfig, if not, add it so your app doesn't check libs (node_modules).