Content not loading due to amount of DOM Elements? (nav push)

We have a problem that some pages does not load in some devices (on the most new ones we have no problem) and we get no error. The page simply does not load. There are probably 30 items. I assume that is because we use the push method and this runs into a overflow as we already have more or less 4 - 5 ion-contents cached?

Can you provide more information? What kind of devices are you testing with? Can you recreate the issue in a small github repo so we can look at it?

Sure I can provide more information. About GitHub repo is a problem as this is a productive project which we can not expose. I’ll show some snippets and json files tho.

More info:

  1. We use json files (the application should work offline)
  2. We load those json files in the onPageLoaded method.
  3. We use simple ion-lists

Fact:

  1. It works in devices with enough space, we have a new Galaxy S7 here and it works fine.
  2. In my S3 Mini, the page does not get loaded.
  3. We have 3 pages and only the last one won’t load (after more or less 20 items in our json)
  4. All the 3 pages are called with nav.push

That is the json that blocks the page:

{
	"id": "m0000134",
	"subject": "math",
	"type": "modules",
	"title": "Differentialrechnung",
	"breadcrumb": "THEMEN | ANALYSIS ",
	"transitions": [{
		"transitionType": "next",
		"conditions": [{
			"target": "m0000135",
			"title": "Grenzwerte von Folgen",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000141",
			"title": "Grenzwerte von Funktionen",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000147",
			"title": "Differenzierbarkeit",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000153",
			"title": "(Stetigkeit)",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000159",
			"title": "Unstetigkeitsstellen",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000165",
			"title": "Mittlere Änderungsrate, Sekantenanstieg",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000171",
			"title": "Lokale Änderungsrate, Anstieg einer Kurve in einem Punkt ",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000177",
			"title": "Graphisches Ableiten",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000183",
			"title": "Ableitung:  Konstanten-, Potenz-, Faktor-, Summenregel",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000189",
			"title": "Ableitung:   Produktregel",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000195",
			"title": "Ableitung:   Kettenregel",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000201",
			"title": "Ableitung:  Quotientenregel",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000207",
			"title": "Ableitung:  Sinus-  und Kosinusregel ",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000213",
			"title": "Ableitung:  Umkehrregel",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000219",
			"title": "1. Ableitung und Monotonie",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000225",
			"title": "2. Ableitung und Krümmung ",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000231",
			"title": "Extrema",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000237",
			"title": "Wendepunkte",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000243",
			"title": "Verhalten im Unendlichen",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000249",
			"title": "Monotonieverhalten",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000255",
			"title": "Krümmungsverhalten",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000261",
			"title": "Tangenten und Normalen",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000267",
			"title": "Kurvendiskussion ganzrationaler Funktionen",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000273",
			"title": "Kurvenscharen",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000279",
			"title": "Newton-Verfahren",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000285",
			"title": "Extremalprobleme",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000291",
			"title": "Rekonstruktion von Funktionen (Verknüpfung zu LGS)",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000297",
			"title": "(lineare Regression)",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000303",
			"title": "Gebrochen-rationale Funktionen",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000309",
			"title": "Trigonometrische Funktionen",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000315",
			"title": "Exponentialfunktionen",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000321",
			"title": "Logarithmusfunktionen",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000327",
			"title": "Einfache Verknüpfungen / Verkettungen von Funktionen ",
			"subject": "math",
			"type": "content"
		}, {
			"target": "m0000333",
			"title": "(Taylor)",
			"subject": "math",
			"type": "content"
		}]
	}, {
		"transitionType": "previous",
		"target": "m0000133",
		"title": "Analysis ",
		"subject": "math",
		"type": "topics"
	}, {
		"transitionType": "nextSibling",
		"target": "m0000339",
		"title": "Integralrechnung",
		"subject": "math",
		"type": "modules"
	}]
}

We use the following code to load it:

backendService.ts:

public getNavigation(target: string): Observable<Navigation> {
    return this.http.get(`data/${target}.json`)
        .map(response => response.json())
        .map((navigation: Navigation) => { return navigation; });
}

Here is our final call which I believe could also be the problem:

    this.backendService.getNavigation(target).subscribe((navigation: Navigation) => {

        this.subject = navigation.subject;
        this.type = navigation.type;
        this.title = navigation.title;
        this.breadcrumb = navigation.breadcrumb;
        this.description = navigation.description;

        navigation.transitions.forEach((transition: Transition) => {
            if (transition.conditions) {
                transition.conditions.forEach((condition: Condition) => {
                    onCondition(condition);
                });
            }
        });
    });

Although we use foreach we are talk about only 30 items. Should this be a reason for blocking the page to load?

That is the page which is not loading:

<ion-header (click)="contentClick()">
    <ion-navbar>
    </ion-navbar>
    <ion-toolbar *ngIf="searchActive">
    </ion-toolbar>
</ion-header>
<ion-content class="{{subject}}" (click)="contentClick()">
    <ion-card>
        <ion-card-header>
            {{breadcrumb}}
        </ion-card-header>
        <ion-card-content>
            {{title}}
        </ion-card-content>
    </ion-card>
    <ion-card>
        <ion-card-header>
            WHAT CAN I FIND HERE?
        </ion-card-header>
        <ion-card-content>
            lorem Ipsum
        </ion-card-content>
    </ion-card>
    <ion-item-group *ngFor="let module of models, let i = index" [class.highlight]="hightlightStatus[i]">
        <ion-item>
            <progress value="{{module.progress}}" max="100"></progress>
            <span>{{module.progress}}%</span>
        </ion-item>
        <ion-item>
            <ion-card (click)="buttonbarItemIndex=i">
                <ion-card-header>
                    {{breadcrumb}}
                </ion-card-header>
                <ion-card-content>
                    {{module.title}}
                </ion-card-content>
            </ion-card>
        </ion-item>
        <ion-item [class.visible]="hightlightStatus[i]" [class.invisible]="!hightlightStatus[i]">
            <buttonbar></buttonbar>
        </ion-item>
    </ion-item-group>
</ion-content>

Any idea what could be blocking the page load?

Hmm it’s hard to tell. Can you take this sample code you have provide and make a project out of it? I’m not looking for an exact copy of your project, just some thing similar in the idea (using the static data you’ve provided) in order to get a better idea