How to not refresh all AMP-Lists when calling setState()?

Question

I'm trying to set up an amp homepage using amp-bind.

I have this state JSON at the top of the page:

<amp-state id="myState" [src]="'/api/activity/all?country=' + selected">
  <script type="application/json">...

And I have these two AMP-Lists:

    <amp-list width="auto"
      height="192"
      layout="fixed-height"
      src="/api/activity/all"
      [src]="myState.categories"
      class="m1"
      id="categories"
      items="data.0.categories">

      <template type="amp-mustache">
         <amp-img  width="197" height="185" src="@{{icon}}"></amp-img>
      </template>
    </amp-list>

And this list:

      <amp-list width="auto"
        height="100"
        layout="fixed-height"
        src="/api/activity/all"
        [src]="myState.data"
        class="m1"
        id="activities"
        items="data">

So far so good. However, I Added a share button that shows an dropup menu when tapped. So I set up a toggler like this:

<amp-img on="tap:AMP.pushState({visible: !visible})" id="share-icon" alt="TO DO" width="50" height="50" src="design/share.png"></amp-img>

My issue is that when I tap the share button, though it works, it refreshes the two lists causing the to flicker.

Answer 1

The flicker results from the amp-lists evaluating their binding (even if the AMP.pushState(...) call does not effect their bindings). Please file a bug report for the AMP Runtime here.