lesson 17 loading

[clemsontiger]

With lesson 17, you create a component wrapper for the vuetable and use the render option. How would I also render out the loading div? not sure how i can incorporate it into the component. working jsfiddle would be wonderful. thanks.

loading div html:

<div  v-if="loading">                         
   <div class="datagrid-loader--overlay">
     <svg class="loader"><use xlink:href="#loading-bars"></use></svg>
   </div>          
</div>  

[ratiw]

@clemsontiger If it was still in the <template> where would you place those loading div?

[clemsontiger]

between paginationTop div container and the table div container? I was just wondering if I could add a "renderLoader(h)" method similar to the renderPagination(h), but not sure how to structure the method for simply plugging in the html for the loader. like

 render(h) {
            return h(
            'div', 
              [    
               // this.renderLoader(h),
                this.renderPaginationTop(h),
                this.renderVuetable(h),
                this.renderPagination(h)
              ])
        },

[ratiw]

@clemsontiger It can be anywhere actually. This depends on how you would like the loader to appear.

If you put it at the top, it will appear there but will not cover the whole table. If you would like the loader to cover the whole table while loading, the table must be inside the loader div. That's the basic idea.

[clemsontiger]

yes, I get this. I was just looking for help and/or sample code as how to write the render function for displaying the loader html block.

[ratiw]

It would be something like the following. The renderSvg can be embbed inside renderLoader, but when the structure gets quite deep or complex, I'll usually break it up like this for readability.

However, the part I'm not sure it will work on not is the use tag which contain xlink:href. You will have to try for yourself.

// <div  v-if="loading">                         
//    <div class="datagrid-loader--overlay">
//      <svg class="loader"><use xlink:href="#loading-bars"></use></svg>
//    </div>          
// </div>  
renderLoader (h) {
  if (this.loading) {
    return h(
      'div',
      { class: { 'datagrid-loader--overlay': true } },
      [
        this.renderSvg(h)
      ]
    )
  }
},
renderSvg (h) {
  return h(
    'svg',
    { class: { 'loader': true } },
    [
      h(
        'use',
        { attr: { 'xlink:href': '#loading-bars' } }
      )
    ]
  )
}