nstudio / nativescript-loading-indicator Goto Github PK
View Code? Open in Web Editor NEWNativeScript Loading Indicator plugin
License: Apache License 2.0
NativeScript Loading Indicator plugin
License: Apache License 2.0
Please, ensure your title is less than 63 characters long and starts with a capital
letter.
In our real app, I need to react to the orientation-change of the device on one specific page, so when navigating to that page I call
application.on(application.orientationChangedEvent, function() { ... });
and when leavig the page I call
application.off(application.orientationChangedEvent);
.
But after that, when you change the orientation of the device and then show the loading indicator, then the loading indicator and its dimmed background appear with a wrong layout, like this:
Just to see the single steps to recreate this issue, have a look at the GIF.
Or when you start in landscape mode and then call application.off(orienationEvent); then it will look like this:
I also tested back to NS 6.1 and nativescript-loading-indicator 1.0.0 and the issue occurs the same way.
Describe the steps to reproduce it.
LoadingIndicatorAndroidIssue.zip
In this sample app, I ommited the application.on(orientationChanged); call as it is not important for recreating this issue.
By the way, when you just show the loading indicator (wthout registering/unregistering any event handlers) and change the orientation of the device while the indicator is showing, the layout is also not correct, but at least it will be correct again for the next show() call.
hi, i have a shared component with loadspinner, and this component is used only inside two pages to service http requests, one work fine, other receive the error "TypeError: Cannot read property 'android' of null".
the component without error is inside tabview BUT in submodule with lazy loading
the component with error is inside TabView in my app.component, this error occurrence when try to use show() method. if i comment show() method call, the source works fine
class PetListComponent {
private loader: LoadingIndicator = new LoadingIndicator();
fetchPets() {
this.loader.show({message: t('loading_fetching_pets')});
// rest of code
}
}
any idea for whats this error occurrence ?
Nexus 6
and preview app.6.0.1
6.0.1
"tns-android"
- 6.0.0
and "tns-ios"
- 6.0.1
"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",
"@types/node": "^12.6.3",
"lodash": "^4.17.15",
"nativescript-angular": "~8.0.0",
"nativescript-ng-ripple": "^2.0.1",
"nativescript-sqlite": "^2.3.3",
"nativescript-theme-core": "~1.0.4",
"reflect-metadata": "~0.1.12",
"rxjs": "~6.5.0",
"tns-core-modules": "6.0.1",
"typeorm": "^0.2.18",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular/compiler-cli": "~8.0.0",
"@ngtools/webpack": "~8.0.0",
"@types/lodash": "^4.14.136",
"@types/node": "^12.6.8",
"nativescript-dev-webpack": "1.0.1",
"typescript": "3.4.5"
},
(new LoadingIndicator()).show({
message: 'Loading...',
margin: 30,
dimBackground: true,
color: '#fff',
backgroundColor: '#039016',
hideBezel: false,
mode: Mode.Indeterminate
});
Hi,
I have a problem with version 2.0.4, I can't close the loading-indicator (Android).
I use Nativescript-angular and tns-core-modules 6.3.2
{
"_defaultProgressColor": {
"_argb": 4278222294
},
"_progressId": 79,
"_messageId": 80,
"_detailsId": 81,
"_customViewId": 82,
"_loadersInstances": []
}
the _loadersInstances is empty and when I look in the plugin code, I see that it does a for each and dismiss them.
PS : i dont have this issue with 2.0.0
It occurs when tns run ios
or tns run android
"dependencies": {
"@nstudio/nativescript-loading-indicator": "^1.0.0",
"nativescript-background-http": "^3.4.0",
"nativescript-cardview": "^3.1.1",
"nativescript-carousel": "^4.1.0",
"nativescript-checkbox": "^3.0.3",
"nativescript-facebook": "^3.0.1",
"nativescript-floatingactionbutton": "^5.0.3",
"nativescript-image-cache-it": "^5.0.0-alpha.3",
"nativescript-imagepicker": "^6.2.0",
"nativescript-oauth2": "^1.4.3",
"nativescript-pager": "^9.5.4",
"nativescript-plugin-firebase": "^8.3.2",
"nativescript-purchase": "^2.0.12",
"nativescript-theme-core": "~1.0.4",
"nativescript-toasty": "^1.3.1",
"nativescript-ui-listview": "^6.3.1",
"nativescript-windowed-modal": "^5.0.6",
"tns-core-modules": "^5.4.3",
"uglifyjs-webpack-plugin": "^2.1.3",
"validator": "^11.0.0"
},
"devDependencies": {
"nativescript-dev-typescript": "^0.9.0",
"nativescript-dev-webpack": "^0.24.1"
},
Describe the steps to reproduce it.
I removed the android.view and ios.view from the options.
const options: OptionsCommon = {
...
android: {
// view: someStackLayout.android, // Target view to show on top of (Defaults to entire window)
cancelable: true,
cancelListener: function(dialog) {
console.log('Loading cancelled');
}
},
ios: {
// view: someButton.ios, // Target view to show on top of (Defaults to entire window)
square: false
...
It works.
But, I have a build error log.
When i tns run ios
or tns run android
in CLI,
i get the error message.
but it works.. is this ok?
+ 299 hidden modules
ERROR in /Users/.../dev/gitlab/app_name/node_modules/@nstudio/nativescript-loading-indicator/index.d.ts
ERROR in /Users/.../dev/gitlab/app_name/node_modules/@nstudio/nativescript-loading-indicator/index.d.ts(77,10):
TS2304: Cannot find name 'UIView'.
ERROR in /Users/.../dev/gitlab/app_name/node_modules/@nstudio/nativescript-loading-indicator/index.d.ts
ERROR in /Users/.../dev/gitlab/app_name/node_modules/@nstudio/nativescript-loading-indicator/index.d.ts(85,10):
TS2503: Cannot find namespace 'android'.
Webpack compilation complete. Watching for file changes.
Webpack build done!
nativescript-plugin-firebase: building for same environment, not forcing prepare.
Preparing project...
Project successfully prepared (Android)
Configure firebase
Successfully transferred all files on device 06157df6e2a....
Restarting application on device 06157df6e2a......
Please, ensure your title is less than 63 characters long and starts with a capital
letter.
When showing a loading indicator and then changing the device orientation, the layout of the loading indicator is not updated correctly on Android.
On iOS, everything works as expected.
A workaround for this is triggering the orientationChange event of the application, hiding the old dialog and create a new dialog within that event-handler.
But before doing that, I just wanted to ask if there is a possible fix for that within the plugin.
Describe the steps to reproduce it.
Just follow the steps on the provided demo app or use the demo app of this repository (it is reproducable on all types of loading dialogs).
"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"
}
###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);`
export class LoadingService {
indicator: LoadingIndicator;
constructor() {
this.indicator = new LoadingIndicator();
}
showLoading(text: string, details: string = '') {
const options: OptionsCommon = {
message: text,
details: details,
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');
},
},
ios: {
square: false,
},
};
this.indicator.show(options);
}
hide(): void {
this.indicator.hide();
}
}
"nativescript": "6.3.2"
"nativescript-vue": "^2.5.0-alpha.3",
"@nstudio/nativescript-loading-indicator": "^2.0.4",
"tns-core-modules": "~6.3.2",
I want to use a loading indicator when I check a few variables before I send an HTTP request.
When the request is returned I close the loading indicator and go to another page.
But besides that. I want to close the loading indicator also in other cases.
So when everything is alright (everything is correctly filled in).
And there is a possible response then he will close the loading indicator.
Otherwise, in other cases, It will keep the loading indicator.
const moment = require('moment');
import {
LoadingIndicator,
Mode
} from '@nstudio/nativescript-loading-indicator';
export default (function () {
let indicator = new LoadingIndicator();
const checkIfTheValuesAreCorrectBeforeWeCanStartSearchingAfterPossibleRoute = async function (_self, requestBuilderForSelect) {
startLoadingModal();
if (_self.data.routeDetails.time.date.real === null) {
assignTimeToRouteDetailsWhenEmpty(_self);
}
if (isEmpty(_self.data.routeDetails.departure.details) || isEmpty(_self.data.routeDetails.arrival.details)) {
startOrAndEndpositionIsntFilledIn(_self);
} else {
await getPossibleRoutes(_self, requestBuilderForSelect);
}
};
function assignTimeToRouteDetailsWhenEmpty(_self) {
_self.data.routeDetails.time.date.show = _self.formatTimeStampBasedOnLanguage.formatTimeStampForShowingSelect(_self);
_self.data.routeDetails.time.date.real = moment().locale('en').format('YYYYMMDD');
_self.data.routeDetails.time.time = _self.data.routeDetails.time.hint.replace(_self.data.routeDetails.time.date.show, '');
}
async function getPossibleRoutes(_self, requestBuilderForSelect) {
await checkIfRouteCanBeFound(_self, requestBuilderForSelect);
}
/***************** HANDLE - ROUTES - ERROR *****************/
async function checkIfRouteCanBeFound(_self, requestBuilderForSelect) {
let isError = await requestBuilderForSelect.checkIfThereIsAPossibleRoute(_self);
switch (isError) {
case null:
showNoInternetConnection(_self);
break;
case true:
showErrorMessageWhyRouteCantBeFound(_self);
break;
case false:
await goToTheResultPage(_self);
break;
}
}
async function goToTheResultPage(_self) {
await _self.$goto('Route', {
props: {
routeDetails: _self.data.routeDetails,
timeTable: _self.timeTable,
indexWithClosestToRealTime: _self.indexWithClosestToRealTime
}
});
stopLoadingModal();
}
/***************** ERROR - MESSAGES *****************/
function startOrAndEndpositionIsntFilledIn(_self) {
stopLoadingModal();
showError(_self, _self.data.error);
}
function showErrorMessageWhyRouteCantBeFound(_self) {
stopLoadingModal();
showError(_self, _self.timeTable.msg);
}
function showNoInternetConnection(_self) {
stopLoadingModal();
internetError(_self);
}
/***************** HELP - FUNCTIONS *****************/
function isEmpty(obj) {
return !obj.hasOwnProperty('routeCode')
}
function startLoadingModal() {
indicator.show({
dimBackground: true,
hideBezel: true,
userInteractionEnabled: false,
mode: Mode.Indeterminate
});
}
function stopLoadingModal() {
indicator.hide();
}
function showError(_self, errorMessage) {
_self.feedback.error({
title: "Error",
message: errorMessage,
duration: 6000
})
}
function internetError(_self) {
_self.feedback.warning({
title: "No Internet Connection",
message: _self._self.data.internetError,
duration: 6000
})
}
return {
checkIfTheValuesAreCorrectBeforeWeCanStartSearchingAfterPossibleRoute,
}
})();
checkIfTheValuesAreCorrectBeforeWeCanStartSearchingAfterPossibleRoute()
. He will start the loadingModal with the function startLoadingModal()
.startOrAndEndpositionIsntFilledIn
and then it should stop the loading indicator. But that doesn't happen.checkIfRouteCanBeFound
.null
means no internet connection. Then he will execute showNoInternetConnection
and close the loading indicator. But that doesn't happen.true
means data can't be found. Then he will execute showErrorMessageWhyRouteCantBeFound
and close the loading indicator. But that doesn't happen.false
means request when successful. Then he will execute goToTheResultPage
and navigate to another page and close the loading indicator. That is the only function that will close the loading indicator.I am not able to see loading text while using this feature. Here is my package.json file. Please help me to solve this.
{
"nativescript": {
"id": "com.cdi.orderProcessing",
"tns-android": {
"version": "6.1.2"
},
"tns-ios": {
"version": "6.1.1"
}
},
"description": "CDI Order Processing",
"license": "SEE LICENSE IN ",
"repository": "",
"dependencies": {
"@nstudio/nativescript-loading-indicator": "^2.0.5",
"base-64": "^0.1.0",
"nativescript-accordion": "^5.0.4",
"nativescript-angular": "^8.2.1",
"nativescript-appversion": "^1.4.2",
"nativescript-bottom-navigation": "^2.0.5",
"nativescript-cardview": "^3.2.0",
"nativescript-carousel": "^6.1.1",
"nativescript-cloud": "^1.19.1",
"nativescript-dna-netservices": "^1.1.0",
"nativescript-downloader": "^2.1.5",
"nativescript-drawingpad": "^3.1.0",
"nativescript-drop-down": "^5.0.4",
"nativescript-exit": "^1.0.1",
"nativescript-geolocation": "^5.1.0",
"nativescript-globalevents": "^1.2.3",
"nativescript-image-cache": "^1.1.6",
"nativescript-insomnia": "^1.2.3",
"nativescript-iqkeyboardmanager": "^1.5.1",
"nativescript-localstorage": "^2.0.1",
"nativescript-masked-text-field": "^4.0.3",
"nativescript-sqlite": "^2.3.3",
"nativescript-theme-core": "~1.0.6",
"nativescript-toasty": "^2.0.1",
"tns-core-modules": "6.0.1",
"url-parse": "^1.4.7",
"utf8": "^3.0.0"
},
"devDependencies": {
"nativescript-dev-webpack": "~1.2.0"
},
"gitHead": "1964ea9e8ca1a0518e0d6370781eedcf6c23db42",
"readme": "NativeScript Application"
}
I created a new component in my Nativescript/Angular project and use the LoadingIndicator as normal like in my other components, but in the new component it doesn't show the LoadingIndicator
indicator = new LoadingIndicator();
showLoader()
{
const options: OptionsCommon = {
message: "Cargando",
dimBackground: true,
color: '#FFFFFF',
hideBezel: true,
userInteractionEnabled: false,
mode: Mode.Indeterminate,
android: {
cancelable: false,
},
ios: {
square: false,
}
};
this.indicator.show(options);
}
hideLoader()
{
this.indicator.hide();
}
Hi,
I want to allow the users to interact with the other elements on the screen while the indicator is still visible.
Unfortunately setting userInteractionEnabled to true or false has no effect.
I checked the code and I see some potential issues:
1)Is this expression correct?
options.userInteractionEnabled =
options.userInteractionEnabled !== undefined || true;
2)Setting setTouchable(true); it's not enough we should also set setOutsideTouchable(true);
as per this thread:
https://stackoverflow.com/questions/7271784/open-a-popupwindow-and-let-the-outsides-still-touchable
Can you make a correction please and see if it works?
Thanks,
John
i am using nativescript+vuejs i have trieds like this and i am using with pure javascript. I tried the below code and i got "_defaultProgressColor" of undefined error
import {LoadingIndicator,Mode,OptionsCommon} from '@nstudio/nativescript-loading-indicator';
export default {
data() {
return {
indicator: LoadingIndicator()
}
},
methods: {
showLoader(){
options: (OptionsCommon) = {
message: 'Loading...',
details: 'Additional detail note!',
progress: 0.65,
backgroundColor: 'red',
android: {
cancelable: false,
},
ios: {
square: false,
}
};
this.indicator.show(options);
},
hideLoader()
{
this.indicator.hide();
}
}
``
I installed the loader on my Nativescript 6.x project and it works great.
However, it also flashes briefly on any route change / page navigation, even if I have not called it.
Has anyone else seen this? Any way to only show when I specifically call this.loader.show() ?
Loading Service Code:
import { Injectable } from '@angular/core';
import {
LoadingIndicator,
Mode,
OptionsCommon
} from '@nstudio/nativescript-loading-indicator';
@Injectable({
providedIn: 'root'
})
export class LoadingService {
public loader = new LoadingIndicator();
constructor() {
}
public showLoader() {
this.loader.show();
}
public hideLoader() {
this.loader.hide();
}
}
Hi,
I get this error when I do :
tns run android
npm ERR! code EINVALIDPACKAGENAME
npm ERR! Invalid package name "@nstudio/@nstudio/nativescript-loading-indicator": name can only contain URL-friendly characters
Thanks
Android/Both
Android versions All, both device and emulator
tns --version
to fetch it) => 6.8.0package.json
file of your"dependencies": {
"@angular/animations": "~8.2.0",
"@angular/common": "~8.2.0",
"@angular/compiler": "~8.2.0",
"@angular/core": "~8.2.0",
"@angular/forms": "~8.2.0",
"@angular/http": "~8.0.0-beta.10",
"@angular/platform-browser": "~8.2.0",
"@angular/platform-browser-dynamic": "~8.2.0",
"@angular/router": "~8.2.0",
"@nativescript/theme": "~2.2.1",
"@ngrx/effects": "^10.1.2",
"@ngrx/entity": "^10.1.2",
"@ngrx/store": "^10.1.2",
"@ngrx/store-devtools": "^10.1.2",
"core-js": "^2.6.9",
"istanbul-instrumenter-loader": "^3.0.1",
"nativescript-angular": "~8.20.0",
"nativescript-camera": "^4.5.0",
"nativescript-drop-down": "^5.0.6",
"nativescript-material-bottomsheet": "^3.3.2",
"nativescript-mediafilepicker": "^3.0.2",
"nativescript-modal-datetimepicker": "^1.2.3",
"nativescript-pdf-view": "^2.4.3",
"nativescript-plugin-firebase": "^10.6.3",
"nativescript-secure-storage": "^2.6.2",
"nativescript-ui-sidedrawer": "^8.0.1",
"nativescript-unit-test-runner": "^0.7.0",
"nativescript-urlhandler": "^1.3.0",
"reflect-metadata": "~0.1.12",
"rxjs": "~6.4.0",
"tns-core-modules": "~6.3.0",
"tns-platform-declarations": "^6.5.15",
"tslib": "1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.0",
"@angular/cli": "~8.3.0",
"@angular/compiler-cli": "~8.2.0",
"@nativescript/schematics": "~1.0.0",
"@nativescript/tslint-rules": "~0.0.5",
"@ngrx/schematics": "^10.1.2",
"@types/jasmine": "3.4.0",
"@types/jasminewd2": "~2.0.3",
"@types/karma": "^3.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"copy-webpack-plugin": "5.1.1",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "4.3.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage": "^2.0.1",
"karma-coverage-istanbul-reporter": "^2.1.0",
"karma-jasmine": "2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"karma-junit-reporter": "^2.0.1",
"karma-nativescript-launcher": "0.4.0",
"karma-remap-istanbul": "^0.6.0",
"karma-sonarqube-unit-reporter": "^0.0.19",
"karma-spec-reporter": "^0.0.32",
"karma-typescript": "^4.1.1",
"karma-webpack": "3.0.5",
"nativescript-dev-webpack": "^1.4.1",
"node-sass": "^4.7.1",
"protractor": "~5.4.0",
"tns-android": "6.5.3",
"tns-ios": "6.5.4",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
on App launch when trying to show loading indication inside on init of page , getting error:
JS: Error creating Loading Indicator Pop Over: Cannot read property 'android' of null
This issue below happens on anything above 0.1.0
of this plugin, I tested this by stepping through every version and found mixed results of the indicator not working at all or being in this stuck state for Android.
"tns-android": {
"version": "6.3.1"
},
"tns-ios": {
"version": "6.3.0"
}
"dependencies": {
"@angular/animations": "~8.2.0",
"@angular/common": "~8.2.0",
"@angular/compiler": "~8.2.0",
"@angular/core": "~8.2.0",
"@angular/forms": "~8.2.0",
"@angular/platform-browser": "~8.2.0",
"@angular/platform-browser-dynamic": "~8.2.0",
"@angular/router": "~8.2.0",
"@nativescript/theme": "~2.2.1",
"@nstudio/nativescript-loading-indicator": "^3.0.1",
"nativescript-angular": "~8.20.3",
"reflect-metadata": "~0.1.12",
"rxjs": "^6.4.0",
"tns-core-modules": "~6.3.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular/compiler-cli": "~8.2.0",
"@ngtools/webpack": "~8.2.0",
"nativescript-dev-webpack": "~1.4.0",
"prettier": "^1.19.1",
"typescript": "~3.5.3"
},
Create a basic wrapper service for the Loading Indicator:
@Injectable()
export class LoadingIndicatorService {
private isShowing = false;
private loadingIndicator: LoadingIndicator;
constructor() {
this.loadingIndicator = new LoadingIndicator();
}
public show(message?: string) {
if (this.isShowing) {
return;
}
const options: OptionsCommon = {
message: message,
dimBackground: true,
color: '#000000',
mode: Mode.Indeterminate,
android: {
cancelable: false,
},
ios: {
square: false,
},
};
this.loadingIndicator.show(options);
this.isShowing = true;
}
public hide() {
this.loadingIndicator.hide();
this.isShowing = false;
}
}
Create a basic service to complete navigation called by a page:
@Injectable()
export class TestNavService {
constructor(
private loadingIndicatorService: LoadingIndicatorService,
private nav: RouterExtensions
) {}
public async tryNav() {
try {
await this.nav.navigate(['/page-two-page']);
} catch (error) {
console.error(error);
} finally {
this.loadingIndicatorService.hide();
}
}
}
Then on a simple button have a method that starts the loading indicator, then calls the navigation service's method to navigate and hide the loading indicator:
public onPress() {
this.loadingIndicatorService.show("This should go away on the next page");
this.testNavService.tryNav();
}
When navigation completed, the finally
calls the hide
method on the Loading Indicator Service but on Android the Loading Indicator does not hide. This works perfectly on iOS. If I revert to 0.1.0
this works again as expected, but it's not ideal to use this old version.
I have created a basic application reproducing the issue here: https://github.com/Codex-/loading-activity-bug-sample
tns run ios
will show that it works as expected (you can sleep the hide if you find it's too fast)
tns run android
will show you the issue described.
:app:mergeDebugAssets > Resolve files of :app:debugRuntimeClasspath
2304: Cannot find name 'UIView'.
:app:mergeDebugAssets
<========-----> 65% EXECUTING [54s]
node_modules/@nstudio/nativescript-loading-indicator/index.d.ts(77,10): error TS2304: Cannot find name 'UIView'.
:app:mergeDebugAssetsativescript-loading-indicator/index.d.ts(85,10): error TS
When i try to show the loader on Android i get the following error;
TypeError: frame_1.Frame.topmost is not a function
This happened after upgrading to NS6
I've tried this version since it was suggested that it now works in Angular
NathanWalker/nativescript-loading-indicator#65 (comment)
but it still doesn't display. I don't get any errors just can't get it to show.
export class LoadingService {
options: any = {
ios: {
backgroundColor: 'yellow',
color: '#000000'
}
};
constructor(private loader: LoadingIndicator) {}
show() {
this.loader.show(this.options);
}
hide() {
this.loader.hide();
}
}
Please, ensure your title is less than 63 characters long and starts with a capital
letter.
When displaying the loading indicator with message and details, only the spinner is shown. There are no message and details. This only occurs on iOS, on Android it is displayed. See code below
import {
LoadingIndicator,
Mode,
OptionsCommon
} from "@nstudio/nativescript-loading-indicator";
...
const indicator = new LoadingIndicator();
const options: OptionsCommon = {
message: "Chargement...",
details: "Récupération de la liste des notifications",
margin: 10,
dimBackground: true,
color: "#85247b", // color of indicator and labels
// background box around indicator
// hideBezel will override this if true,
userInteractionEnabled: false, // default true. Set false so that the touches will fall through it.
mode: Mode.Indeterminate // see options below
};
indicator.show(options);
Component nativescript has 6.0.3
Component tns-core-modules has 6.0.7
Component tns-android has 6.0.2
Component tns-ios has 6.0.2
tns run ios
/ tns run android
Error:
ERROR in node_modules/@nstudio/nativescript-loading-indicator/index.d.ts:85:10 - error TS2503: Cannot find namespace 'android'.
I am using NativeScript v 6.4.0 and Angular v 8.
I installed this plugin and then I tried to build my project but I got this error:
tns run ios
ERROR in ../node_modules/@nstudio/nativescript-loading-indicator/loading-indicator.js
Module not found: Error: Can't resolve '@nativescript/core/color' in '/Users/aubrey/Documents/Repos/SelfServiceApp2/node_modules/@nstudio/nativescript-loading-indicator'
@ ../node_modules/@nstudio/nativescript-loading-indicator/loading-indicator.js 6:14-49
@ ./app/core/http-loader.service.ts
@ ./app/core/core.module.ts
@ ./app/app.module.ts
@ ./main.ts
JavaScript error:
file:///node_modules/@nstudio/nativescript-loading-indicator/loading-indicator.js:6:22: JS ERROR Error: Cannot find module '@nativescript/core/color'
(CoreFoundation) *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Error: Cannot find module '@nativescript/core/color'
node_modules/tns-core-modules/package.json
file in your project)"dependencies": {
"@angular/animations": "~10.1.0",
"@angular/common": "~10.1.0",
"@angular/compiler": "~10.1.0",
"@angular/core": "~10.1.0",
"@angular/forms": "~10.1.0",
"@angular/platform-browser": "~10.1.0",
"@angular/platform-browser-dynamic": "~10.1.0",
"@angular/router": "~10.1.0",
"@danvick/ngx-translate-nativescript-loader": "^2.0.2",
"@nativescript-community/ui-material-button": "^4.0.11",
"@nativescript-community/ui-material-floatingactionbutton": "^4.0.11",
"@nativescript-community/ui-material-textfield": "^4.0.11",
"@nativescript/angular": "~10.1.0",
"@nativescript/core": "~7.0.0",
"@nativescript/firebase": "^11.0.0",
"@nativescript/theme": "~2.5.0",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"@nstudio/nativescript-loading-indicator": "^4.0.0",
"@nstudio/nativescript-pulltorefresh": "^3.0.0",
"nativescript-barcodescanner": "^4.0.0",
"nativescript-feedback": "^2.0.0",
"nativescript-purchase": "^2.0.14",
"nativescript-ui-listview": "^9.0.2",
"nativescript-ui-sidedrawer": "~9.0.0",
"reflect-metadata": "~0.1.12",
"rxjs": "^6.6.0",
"zone.js": "~0.11.1"
},
"devDependencies": {
"@angular/compiler-cli": "~10.1.0",
"@nativescript/android": "7.0.0",
"@nativescript/webpack": "~3.0.0",
"@ngtools/webpack": "~10.1.0",
"codelyzer": "~6.0.0",
"node-sass": "^4.14.1",
"tslint": "~6.1.3",
"typescript": "~3.9.0"
},
Getting the error Error creating Loading Indicator Pop Over: Cannot read property 'drawable' of undefined
when attempting to show a loading indicator.
Code example:
private indicator = new LoadingIndicator();
private showLoading() {
const options: OptionsCommon = {
progress: 0.65,
margin: 10,
color: "#4B9ED6",
backgroundColor: "black",
mode: Mode.AnnularDeterminate
};
this.indicator.show(options);
}
Describe the steps to reproduce it.
Hello,
When I try to build my 6.3.0 NS Core app on my Mac (local build, using tns build ios), I get the following error:
CDN: trunk URL couldn't be downloaded: https://raw.githubusercontent.com/CocoaPods/Specs/master/Specs/c/8/7/MBProgressHUD/1.2.0/MBProgressHUD.podspec.json Response: 302
I think the problem is with the SSL certificate of the githubusercontent.com, because I tried getting the JSON file in the browser and I got a certificate error.
Has anyone else seen that? What is the solution to move past this issue?
Thanks.
This is not really an issue but more of an feature request. Not sure where to post these other then here.
I would like to have a delay option on the show function. I have a situation where my observable returns very quickly and i get a short glitch of the indicator which could be confusing for users.
Ofcourse this can be achieved in many ways but an implementation in the component would be much appreciated 👍
Regards,
Martijn
ERROR in node_modules/@nstudio/nativescript-loading-indicator/index.d.ts(77,10): error TS2304: Cannot find name 'UIView'.
node_modules/@nstudio/nativescript-loading-indicator/index.d.ts(85,10): error TS2503: Cannot find namespace 'android'.
Successfully synced application org.nsf.mobileaudit on device HGAGQW7N.
System.err: An uncaught Exception occurred on "main" thread.
System.err: Unable to start activity ComponentInfo{org.nsf.mobileaudit/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onCreate failed
System.err: Error: Main entry is missing. App cannot be started. Verify app bootstrap.
System.err:
System.err: StackTrace:
System.err: java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nsf.mobileaudit/com.tns.NativeScriptActivity}: com.tns.NativeScriptExceptionSystem.err: at com.tns.Runtime.callJSMethodNative(Native Method)
System.err: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1209)
System.err: at com.tns.Runtime.callJSMethodImpl(Runtime.java:1096)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1083)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1063)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1055)
System.err: at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:19)
System.err: at android.app.Activity.performCreate(Activity.java:6720)
System.err: at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1119)
System.err: at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2618)
System.err: ... 9 more
-Android
-Android Api 29
"tns-android" : "6.3.1"
install the plugin and run show function.
System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method run failed
System.err: TypeError: Cannot read property 'push' of undefined
System.err:
System.err: StackTrace:
System.err: (file:///node_modules/@nstudio/nativescript-loading-indicator/loading-indicator.js:41:0)
System.err: at invoke(file:///node_modules/@nativescript/core/timer/timer.js:20:30)
System.err: at run(file:///node_modules/@nativescript/core/timer/timer.js:24:0)
System.err: at com.tns.Runtime.callJSMethodNative(Native Method)
System.err: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1286)
System.err: at com.tns.Runtime.callJSMethodImpl(Runtime.java:1173)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1160)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1138)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1134)
System.err: at com.tns.gen.java.lang.Runnable.run(Runnable.java:17)
System.err: at android.os.Handler.handleCallback(Handler.java:883)
System.err: at android.os.Handler.dispatchMessage(Handler.java:100)
System.err: at android.os.Looper.loop(Looper.java:214)
System.err: at android.app.ActivityThread.main(ActivityThread.java:7356)
System.err: at java.lang.reflect.Method.invoke(Native Method)
System.err: at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492)
System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:930)
it seems that the npm version does not have the latest code here in git repository.
please check the versions.
Long messages do not line break in iOS, the message is cut off on the first/only line.
^3.0.3
Describe the steps to reproduce it.
Use a long "message".
This fixes it in my project:
master...jasonfrasch:patch-1
I can submit a PR from my branch if you like.
#19 # Which platform(s) does your issue occur on?
tns --version
to fetch it) 6.2.2node_modules/tns-core-modules/package.json
file in your project) 6.2.3"tns-android"
and "tns-ios"
properties in the package.json
file of your project) 6.2.0package.json
file of yourDescribe the steps to reproduce it.
Remove and add the plugin and the main ios.js, android.js and common.js files are missing.
No
Hi @bradmartin,
I have 2 projects one of them work fine and the other throw the error bellow ! I tried to resolve this error by many doing rm -Rf node_modules hooks platforms
, do you have idea about this error ?
thanks
System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method finishUpdate failed
System.err: TypeError: frame_1.Frame.topmost is not a function
System.err:
System.err: StackTrace:
System.err: Frame: function:'push.../node_modules/@nstudio/nativescript-loading-indicator/loading-indicator.js.LoadingIndicator._createPopOver', file:'file:///node_modules/@nstudio/nativescript-loading-indicator/loading-indicator.js:217:0
System.err: Frame: function:'push.../node_modules/@nstudio/nativescript-loading-indicator/loading-indicator.js.LoadingIndicator.show', file:'file:///node_modules/@nstudio/nativescript-loading-indicator/loading-indicator.js:38:0
System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method run failed
System.err: TypeError: frame_1.Frame.topmost is not a function
System.err:
System.err: StackTrace:
System.err: Frame: function:'LoadingIndicator._createPopOver', file:'file:///node_modules@nstudio\nativescript-loading-indicator\loading-indicator.js:236:33
System.err: Frame: function:'', file:'file:///node_modules@nstudio\nativescript-loading-indicator\loading-indicator.js:41:26
System.err: Frame: function:'invoke', file:'file:///node_modules\tns-core-modules\timer\timer.js:19:47
System.err: Frame: function:'run', file:'file:///node_modules\tns-core-modules\timer\timer.js:23:12
System.err: at com.tns.Runtime.callJSMethodNative(Native Method)
System.err: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1242)
System.err: at com.tns.Runtime.callJSMethodImpl(Runtime.java:1122)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1109)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1089)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1081)
System.err: at com.tns.gen.java.lang.Runnable.run(Runnable.java:17)
System.err: at android.os.Handler.handleCallback(Handler.java:873)
System.err: at android.os.Handler.dispatchMessage(Handler.java:99)
System.err: at android.os.Looper.loop(Looper.java:226)
System.err: at android.app.ActivityThread.main(ActivityThread.java:7209)
System.err: at java.lang.reflect.Method.invoke(Native Method)
System.err: at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:576)
System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:942)
I am having the issue on iOS with nativescript 6.4.1
loader.show() is not displaying the loader everytime. Its starts to hide sometimes behind the view. Quick help is needed. Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.