Component loading before detail page is pushed

Hello,

I am loading a custom component into a detail page that is pushed from a list view. However, it appears the component view is loading before the detail page is fully displayed to the user. See the preview on what I am talking about. What should I be looking into to fix this issue?

Thanks

Can you share your project with us?

That’s a weird one.

I can’t share the entire project unfortunately. Is there anything specific you would like to see?

Yeah the code would be quite useful.

I think you have your component not in the other page but somewhere else like in the app.html or something - but without seeing the code it’s a nah from me.

Or if you can reproduce the problem in a newly created app that would do it.

Your choice.

Here is a sample project that has the same issue. I started from the Ionic template and generated a Detail page and a Test component.

I would love to hear your thoughts on what I may be doing wrong here.

Thanks

Right your problem is where it’s injected. <ion-header>

That’s a fickle area which employs (obviously) different css trickery to the rest of the page so you can’t really use that area for this.

If you move your component to ion-content and remove the padding from ion-content the transition is absolutely correct.

<ion-header>
    <ion-navbar>
        <ion-title>detail</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    <test></test>
</ion-content>

Thanks for the clarification, everything is now working as intended!

Don’t forget to like or marked as ‘The solution’ or whatever the wording is.