Issues with retrieving data from firebase storage


#1

I have made a backend in angular2+ where I put items in a firebase database and store images in firebase storage.

In my nativescript app I am trying to retrieve the images and present them in a listview. But it seems like it’s to slow or something. Cause sometimes I get 1 or 2 images, sometimes none, and sometimes 3 images. It’s not very consistent in retrieving the data…

questions.service.ts
getAllQuestions(): Observable {
return new Observable((observer: any) => {
let path = ‘questions’;
this.LoadingIndicator.show({ message: ‘Ophalen gegevens…’ });
let onValueEvent = (snapshot: any) => {
this.ngZone.run(() => {
let results = this.handleQuestionsSnapshot(snapshot.value);
observer.next(results);
this.LoadingIndicator.hide();
});
};
firebase.addValueEventListener(onValueEvent, /${path}).then(() => {
this.LoadingIndicator.hide();
});
}).share();
}

handleQuestionsSnapshot(data: any) {
//empty array, then refill and filter
this._allQuestions = [];
if (data) {
for (let id in data) {
let result = (Object).assign({ id: id }, data[id]);
if (result.filename != null) {
let remoteFullPath = /questions/${result.id}/subjectBg/${result.filename};
this.firebaseService.getDownloadUrl(remoteFullPath)
.then(function (res) {
result[“downloadUrl”] = res;
}
);
this._allQuestions.push(result);
}
}
}
return this._allQuestions;
}

list.component.ts
retrieving all questions
public _allQuestions$: BehaviorSubject<Array<DataItem>> = new BehaviorSubject([]);

this.questionService.getAllQuestions().subscribe(val => this._allQuestions$.next(val) );

list.html
And here’s my listview

anyone got any pointers what I am doing wrong ?


#2

#3

Based on tips on slack about making the images size smaller helped a bit with the loading.
But the images in the listview on first go don’t seem to render properly.


#4

I’m doing something similar with my QuickNoms app (www.github.com/jlooper/quicknoms-app) - grab recipe images and display them. I’m using a StackLayout instead of the ListView, however, in a card format - maybe a StackLayout would render a little faster?

<ScrollView class="green">
    <WrapLayout horizontalAlignment="center">      
        <StackLayout style="margin-left: 10" class="card" width="45%" *ngFor="let recipe of (recipes$ | async)">
            <StackLayout horizontalAlignment="center" (tap)="goToRecipe(recipe.id)">
                <Image [src]="recipe.Image"></Image>            
                <Label class="name" horizontalAlignment="center" textWrap="true" [text]="recipe.Name"></Label>
            </StackLayout>
        </StackLayout>           
    </WrapLayout> 
</ScrollView>