Content showing before the page loads and when refreshing, AngularJS

I have a search bar with a button which must be displayed every time you focus on the search bar, in order for you to understand I record this video where you can see in the top right of the screen the behavior I mentioned on the question, just right after the logging you would see a button “Cancel”, and then I refresh the page around 3 times for you to see that the same is happening, at the end you will see that click on Cancel and the button takes around 2 seconds to disappear, and it must disappear immediately.

Look at my code and tell me what is going on, please

    <div class="bar-subheader">

        <label>
          <input type="text"
                 ng-model="query"
                 ng-focus="showInput = true"
                 ng-blur="showInput = false">
        </label>
        <!-- this is the cancel button -->
        <button class="button-clear"
                ng-show="showInput"
                ng-click="query = null">
          Cancel
        </button>

    </div>

change the ng-show to `ng-if``?

maybe try ng-if='query'