[SOLVED] Delay Rendering Page on Scrol

When i scroll up or down on a page, some items take a while to render even tho the page is already loaded. i can’t figure out what is causing the delay, if it’s something with template7. I have attached a short video showing this. Any thoughts or ideas?

can you share some code? it would be useful to anybody how wants to help you to read what you are doing.

I put the code for that page here:

https://jsfiddle.net/t053fgan/1/

Thanks!

edit:

  <!-- Page, data-name contains page name which can be used in page callbacks -->
  <div class="page" data-name="transactions" id="transactions-page">
    <!-- Top Navbar -->
    <div class="navbar">
      <div class="navbar-inner margin-top padding-top">
        <div class="left" style="margin-top:130px">
          <a href="#" class="link icon-only panel-open" data-panel="left">
            <i class="f7-icons menu-icon zero-white ios-only size-75">menu</i>
            <i class="icon menu-icon zero-white material-icons md-only size-40">menu</i>
          </a>
        </div>
        <div class="title right" style="margin-right:40px;margin-top:130px">
          <img
            class="zero-white-img"
            width="65"
            src="img/Zeroheaderwhite.zero-student-loan-debt-01.svg"
          />
          <img
            class="display-none zero-grey-img"
            width="65"
            src="img/ZeroTM.zero-student-loan-debt-01.svg"
          />
        </div>
      </div>
    </div>

    <!-- Scrollable page content-->
    <div class="page-content top-page">
      <div class="text-align-center century-gothic-font no-margin">
        <div id="transheader-wrap"></div>
        <script id="transheader-template" type="text/template7">
    {{#js_if "this.user_status_code == 'paused' "}}
    <div class="bg-zero-grey-gradient2 padding header-img">
        <br><br>
        <div class="zero-white margin-top margin-bottom" style="margin-top:25px">
            <h1 class="heading-font no-bold" style="margin-top:25px">{{full_name}}</h1>
            <hr style="width:75%"> <br>
            <div class="sub-heading-font">Your account is paused and you are not contributing to your student loan.
              <br>
              <div class="row justify-content-center margin-top">
                  <div class="col-90">
                      <button class="button button-raised button-large button-fill color-orange size-20" style="height: 40px" onclick="pauseAccount();">Un-Pause Account</button>
                  </div>
                </div>
  <br>
          </div>
        </div>
      </div>
      {{else}}
          <div class="bg-zero-blue-green-gradient padding header-img">
            <br><br>
            <div class="zero-white margin-top margin-bottom">
                <h1 class="heading-font no-bold" style="margin-top:45px">Round-Up Progress</h1>
                <hr style="width:75%;color:white">
                <div class="misc-wrap">
                    <div class="progChart -type-donut -label-centered">
                      <canvas id="roudup_progress" width="150" height="150"></canvas>
                      <div class="progChart__summary">
                        <div class="progChart__summary__number text-white size-20">
                          <br>
                          {{total_current_roundups_no_batch_display}}
                        </div>
                      </div>
                    </div>
                  </div>
                  <p class="no-margin-top">{{remaining_roundup_display}} <span class="zero-darker-grey">until your Round-Ups are withdrawn</span></p>
              </div>
            </div>
          {{/js_if}}
            <div class="block no-margin-top">
              <div class="row">
                <div class="col-50">
                  <div class="margin-top text-align-center">
                    <h3 class="no-bold size-16">Next Payment</h3><hr style="width:75%">
                    <img width="50" class="" src="img/CurrentLoan.svg" alt="Card image cap">
                      <div>
                        <span class="zero-green size-20">{{total_in_fbo_display}}</span><br>
                        {{#js_if "this.next_payment_date == '' || this.next_payment_date == null || this.next_payment_date_display == '12/31/1969' "}}
                          In {{remaining_roundup_display}}
                        {{else}}
                          On {{next_payment_date_display}}
                        {{/js_if}}
                      </div>
                  </div>
                </div>
                <div class="col-50">
                  <div class="margin-top text-align-center">
                    <h3 class="no-bold size-16">Last Payment</h3><hr style="width:75%">
                    <img width="50" class="" src="img/LastPayment.svg" alt="Card image cap">
                      <div>
                        <span class="zero-green size-20">{{last_payment_amount_display}}</span><br>
                        {{#js_if "this.last_payment_date == '' || this.last_payment_date == null || this.last_payment_date_display == '12/31/1969' "}}
                        {{else}}
                          On {{last_payment_date_display}}
                        {{/js_if}}
                      </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="block">
              <h3 class="size-16 no-bold">Current Round-Ups</h3>
              <div class="border no-padding-top">
                <div class="data-table text-align-center scroll">
                    <table>
                      <thead>
                        <tr>
                          <th class="label-cell text-align-center size-13">Date</th>
                          <th class="text-align-center size-13">Memo</th>
                          <th class="text-align-center size-13">Round-Up</th>
                        </tr>
                      </thead>
                      <tbody>
                      {{#each user_roundups}}
                        <tr>
                          <td class="label-cell text-align-center size-12">{{transaction_date}}</td>
                          <td class="text-align-center size-12">{{memo}}</td>
                          <td class="text-align-center zero-green size-12">{{total_roundup}}</td>
                        </tr>
                      {{/each}}
                      </tbody>
                    </table>
                  </div>
              </div>
            </div>
            <div class="block">
              <h3 class="no-bold size-16">Pending Transactions</h3>
                <div class="border no-padding-top">
                  <div class="data-table text-align-center scroll">
                    <table>
                      <thead>
                        <tr>
                          <th class="label-cell text-align-center size-13">Date</th>
                          <th class="text-align-center size-13">Account</th>
                          <th class="text-align-center size-13">Amount</th>
                        </tr>
                      </thead>
                    <tbody>
                      {{#each user_batches}}
                        <tr>
                          <td class="label-cell text-align-center size-12">{{display_date}}</td>
                          <td class="text-align-center size-12">{{source_account}}</td>
                          <td class="text-align-center size-12">{{amount}}</td>
                        </tr>
                      {{/each}}

                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            <div class="block">
              <h3 class="no-bold size-16">Posted Transactions</h3>
              <div class="border no-padding-top">
                <div class="data-table text-align-center scroll">
                    <table>
                      <thead>
                        <tr>
                          <th class="label-cell text-align-center size-13">Date</th>
                          <th class="text-align-center size-13">Account</th>
                          <th class="text-align-center size-13">Amount</th>
                        </tr>
                      </thead>
                      <tbody>
                      {{#each user_transactions}}
                        <tr>
                          <td class="label-cell text-align-center size-12">{{display_date}}</td>
                          <td class="text-align-center size-12">{{source_account}}</td>
                          <td class="text-align-center size-12">{{amount}}</td>
                        </tr>
                      {{/each}}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="block" style="margin-bottom:250px">
              <h3 class="no-bold size-16">Email your Statement</h3>
              <div class="row justify-content-center margin-bottom margin-top">
                  <div class="border text-align-center col-50 text-align-center margin-right input-dropdown-wrap">
                      <select style="width:100%" name="statement_year" id="statement_year" class="text-align-center justify-content-center">
                        <option class="text-align-center justify-content-center" value="" selected disabled>Year</option>
                        <option value="2019">2019</option>
                        <option value="2018">2018</option>
                      </select>
                  </div>
                  <div class="border text-align-center col-50 text-align-center input-dropdown-wrap">
                      <select style="width:100%" name="statement_month" id="statement_month" class="text-align-center justify-content-center">
                        <option class="text-align-center justify-content-center" selected disabled value="">Month</option>
                        <option value="1">January</option>
                        <option value="2">February</option>
                        <option value="3">March</option>
                        <option value="4">April</option>
                        <option value="5">May</option>
                        <option value="6">June</option>
                        <option value="7">July</option>
                        <option value="8">August</option>
                        <option value="9">September</option>
                        <option value="10">October</option>
                        <option value="11">November</option>
                        <option value="12">December</option>
                      </select>
                  </div>
                </div>

                <button class="button-raised button button-fill button-large color-orange tab-link size-20" onclick="emailStatement();">Email Statement</button>
          </div>
        </script>
      </div>
    </div>
    <!-- Scrollable page content-->
  </div>
function loadTransactions() {

  user_details.user_roundups = user_roundups;
  user_details.user_batches = user_batches;
  user_details.user_transactions = user_transactions;

  //Show Transactions Header
  var template = $$('#transheader-template').html();
  var compiledTemplate = Template7.compile(template);
  $$('#transheader-wrap').html(compiledTemplate(user_details));

  showRoundupGraph();
  changeNav();
}

i edited your post and pasted your code so its easy to read.

are yo calling a backend? does Email your Statement depends on some async call? i dont work with template7, but your code seems fine to me. can you replicate the error in the jsfiddle. instead of pasting just the code there.

I am calling a backend but I don’t load that page until I have all the data. So when I scroll the page up and down I already have the data. The email your statement doesn’t depend on any async call - it doesn’t have any dependency it’s just plain html.

I can see if I can get it going in jsfiddle.

I figured out what’s causing the issue… on the pages this happens, I am loading a chart using chart.js - is there a preferred chart library to use or a proper way to load and use chart.js with f7/Cordova?

Chart.js should work totally fine with F7. If it is a cordova app, make sure you are using WKWebView plugin. Also you can set CSS transform: translate3d(0,0,0) property on chat parent element, can help

I added the WKWebView plugin (cordova plugin add cordova-plugin-wkwebview-engine) and now I am unable to login to my app: “Origin Null is not allowed by Access-Control-Allow-Origin”.

I did some research and it looks like this plugin enforces CORs. I tried to find a solution but none seem to work. Is there something specific I can add to my META or config.xml?

Here is my current meta tags:

 <meta http-equiv="Content-Security-Policy" content="
 default-src * data: blob: ws: wss: gap://* file://*;
 style-src * 'unsafe-inline' 'self' 'unsafe-eval'; 
 script-src * 'unsafe-inline' 'unsafe-eval';
 connect-src * ws: wss:;">

i added ionic wkwebview, it works fine for me.

I am not using ionic

i dont use it also, you dont need to use ionic to use the plugin

Now I get, "Origin ionic://localhost is not allowed by Access-Control-Allow-Origin

You need to specify correct CORS headers on server where you send login data

1 Like

Yep that was it! This resolved my overall issue as well. Thank a lot for the help guys!

1 Like