Issues with retrieving data from firebase storage


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…

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

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/${}/subjectBg/${result.filename};
.then(function (res) {
result[“downloadUrl”] = res;
return this._allQuestions;

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

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

And here’s my listview

anyone got any pointers what I am doing wrong ?



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.


I’m doing something similar with my 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(">
                <Image [src]="recipe.Image"></Image>            
                <Label class="name" horizontalAlignment="center" textWrap="true" [text]="recipe.Name"></Label>