Can see [hidden] component for short time on page loading

#1

Hi,

On a page, I have some items that will be hidden depending of the data that will be retrieved from a SQlite database.

Right now, when the page loads I see my hidden items for a really short moment and disappear when the condition is reached.

How can I make sure that when the page loads, everything that should be hidden does not show up? I think there was something in angular 1 called “cloak” or something similar, no?

The [hidden] condition is waiting from something on my SQlite database, so I need that platform to be ready (this.platform.ready().then()).

I tried to put that code inside the constructor. Did not work.

I tried in the onPageWillEnter(). Did not work

I tried in the onPageLoaded(). Did not work.

What else can I try?

Thanks

#2

This seems to be a Catch-22. Can you rewrite the [hidden] condition so that it defaults to truthy before the platform is ready? Something like [hidden]="!platformIsReady || platformDependentCondition"?

#3

@rapropos,

Right now, my 2 [hidden] condition are based on a “data.lenght”, so how would you write the new condition? I need to add thee !platformIsReady also?

<ion-card [hidden]=“data.lenght”>
…

<ion-card [hidden]="!data.lenght">

#4

“based on” isn’t enough information to really give a good answer.

#5

You have to ensure that the [hidden] condition evaluates to true from the start, just as @rapropos suggested.

This can be when the platform is ready or some data is loaded, i.e.:

// test.ts
// ...
export class TestPage {
  isPlatformReady: boolean = false;
  isDataLoaded: boolean = false;
  // TODO: Use real conditions instead of this one:
  showMessages: boolean = true;
  
  constructor(platform: Platform, dataProvider: DataProvider) {
    platform.ready().then(() => this.isPlatformReady = true);
    dataProvider.load().then((data) => this.isDataLoaded = (data && data.length > 0));
  }
  
  // ...
}

<!-- Won't be shown until the platform is ready. -->
<div [hidden]="!isPlatformReady || !showMessages">Platform is ready!</div>
<!-- Won't be shown until the data is loaded. -->
<div [hidden]="!isDataLoaded || !showMessages">Data is loaded!</div>

The point is to hide the items by default until the required data is loaded and you can update the other conditions as needed.

#6

Understood and working great.

Thanks both of you!