Component ion-menu-button loads late

Ionic Framework Ionic Vue
1

Hi,

I’m starting with Ionic and Vue 3. To learn the framework, I’m just playing with GitHub - ionic-team/ionic-conference-app: A conference app built with Ionic to demonstrate Ionic and moving it (just some parts) to Vue.

I have an issue I don’t know how to resolve in the toolbar. I started a project with sidemenu template. My template code in a dummy page is the following:

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-buttons v-if="!showSearchBar" slot="start">
          <ion-menu-button color="primary"></ion-menu-button>
        </ion-buttons>
        <ion-title v-if="!showSearchBar">{{ pageTitle }}</ion-title>
        <ion-searchbar
          v-if="showSearchBar"
          show-cancel-button="always"
          @ionCancel="switchSearchBar"
          placeholder="Search"
        ></ion-searchbar>
        <ion-buttons v-if="!showSearchBar" slot="end">
          <ion-button @click="switchSearchBar">
            <ion-icon slot="icon-only" :icon="searchOutline"></ion-icon>
          </ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
  </ion-page>
</template>

When I press the cancel button of the searchbar the title is first loaded at the top left, then the menu icon, and the title is moved a bit to the right. It’s strange. It seems that the title loads first than the ion menu icon, and when it is loaded, it moves the title.

Do you know what is happening?

Thanks you in advance.

1 Like
2

Can you create a GitHub repo and provide the link here?

3

Here you have: GitHub - carlesjm/test-dummy-ionic-vue

It’s the sidemenu template with two extra components to illustrate this. Preview with Material Design, not iOS.

Thanks.

4

Thanks! The problem here is that ion-menu-button asynchronously determines if it needs to show/hide depending on the menu state. v-if will re-add the component to the DOM if its condition is met, so every time you hide the searchbar, Vue is re-creating the ion-menu-button component which is leading to the flicker you are seeing. Rather than use v-if try using v-show on the ion-buttons. This will keep ion-menu-button in the DOM but will just hide it using CSS.

5

Thank you very much! Grateful to know the reason to understand better the problem!

6

And how can I prevent the flicker?