Polymer 2 (API calls from every element in <iron-pages>)

[ibrahimshahkhan]

Dear Monica,

I was fortunate enough to visit your cheatsheet and come across your email address. Thank you for your wonderful blog which I'm inspired by and would like to do such a thing myself. I'm currently working on an application that uses Polymer 2 and came across an issue which I'd be grateful if you can help me solve it.

I was trying to build an SPA using app-location, app-route, iron-selector, iron-pages,... I noticed that my application was sending excessive API calls. It was making calls from a page that I didn't open yet. Both my iron-pages are making API calls before calling them. Can you please tell me where I'm going wrong?

`<app-location route="{{route}}" use-hash-as-path

<app-route
    route="{{route}}"
    pattern="/:name"
    data="{{routeData}}"
    tail="{{subroute}}">
</app-route>

<app-drawer-layout fullbleed narrow="{{narrow}}">
  <!-- Drawer content -->
  <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
    <app-toolbar>Menu</app-toolbar>
    <iron-selector selected="[[routeData.name]]" attr-for-selected="name" class="drawer-list" role="navigation" fallback-selection="home">
      <div name="home">
        <a href="#/mentions">Mentions</a>
      </div>   
      <div name="reviewdashboard">
            <a href="#/reviewdashboard">Reviews</a>
        </div>          
    </iron-selector>
  </app-drawer>

  <!-- Main content -->
  <app-header-layout has-scrolling-region>

    <app-header slot="header" condenses reveals effects="waterfall">
      <app-toolbar>
        <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
        <div main-title>Chuck Norris</div>
        <a name="register-login" href="[[rootPath]]register-login" hidden$="[[storedUser.loggedin]]">Log in</a>            
      </app-toolbar>
    </app-header>

    <iron-pages
        selected="[[routeData.name]]"
        attr-for-selected="name">
        <webpr-reviewdashboard name="reviewdashboard"></webpr-reviewdashboard>
        <webpr-mentions name="mentions"></webpr-mentions>
    </iron-pages>
  </app-header-layout>
</app-drawer-layout>`

[notwaldorf]

It's hard to say what's going on, though "making calls from a page that I didn't open yet" to me implies that element is somehow already on the page. Looking at your iron-pages, if you already imported the definition for webpr-reviewdashboard (or -mentions), that element will already be on the page, since there's nothing telling the browser not to parse that, and if your api call is in attached, then it will definitely run. If you want to do lazy pages, you need to somehow import that element only when you switch to it, so that its code doesn't run the moment the application boots up.

[ibrahimshahkhan]

Thank you so much 😃

On Wed 15 Aug, 2018, 12:19 AM Monica Dinculescu, notifications@github.com wrote:

It's hard to say what's going on, though "making calls from a page that I didn't open yet" to me implies that element is somehow already on the page. Looking at your iron-pages, if you already imported the definition for webpr-reviewdashboard (or -mentions), that element will already be on the page, since there's nothing telling the browser not to parse that, and if your api call is in attached, then it will definitely run. If you want to do lazy pages, you need to somehow import that element only when you switch to it, so that its code doesn't run the moment the application boots up.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/notwaldorf/ama/issues/98#issuecomment-412977101, or mute the thread https://github.com/notifications/unsubscribe-auth/AWSjiZnNA7f1foC7Z45jCtrjHS36y4JQks5uQxungaJpZM4Vz3jP .