EasySearch meteor

Question

is it possible to change the button loadmore of the easySearch search package by a spinner? Giving you style? According to the documentation can give the style, I have tried to make it work, but so far I have not been successful.

{{> EasySearch.LoadMore index=myIndex content="Load more content"}}

Parameters

content: The content of the button attributes: Object with the button attributes (e.g. { class: "load-more-button" }) count: Number of documents to load

Answer 1

Unfortunately, you will not be able to change from a 'button' to a 'spinner' because the EasySearch.LoadMore component literally renders an HTML button element (see below taken from the EasySearch source).

<template name="EasySearch.LoadMore">
    {{#if moreDocuments}}
        <button {{attributes}}>{{content}}</button>
    {{/if}}
</template>

Even though you cannot change to a spinner, you can at least style the 'button' using the attributes argument (which you mentioned in your question). To do this, just pass an object that contains a class property. Since you cannot define object literals in spacebars, you will have to create a template helper to do this (as I have shown in the below example).

Template.mySearch.helpers({
  loadMoreAttributes: function() {
    return {
      class: "load-more-button"
    }
  },
});

Then use your helper in your template like this.

{{> EasySearch.LoadMore index=myIndex content="Load more content" attributes=loadMoreAttributes}}

This will give your "load more" button a css class of load-more-button. Then you can just style it in css like the example below. Obviously, you will use the styling that you want...this is purely for example.

.load-more-button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}