Example: Change from pagination to continuous loading

Goal

Change the results loading from standard pagination to a “load more“behaviour.

Steps

1. Extend the Results component - Example: Extending the results set

2. In the template, override remove all instance of <tool-row />. Add the <load-more /> component after the <result-listing />. The end result should look like this:

   <script id="vue-hawksearch-results" type="x-template">
       <div class="hawk-results">
           <search-results-label />
           <banner zone="Top"></banner>
           <selections />
           <template v-if="searchError">
               <span>{{ $t('response_error_generic') }}</span>
           </template>
           <template v-else-if="searchOutput && searchOutput.Results && searchOutput.Results.length == 0">
               <span>{{ $t('No Results') }}</span>
           </template>
           <template v-else-if="!waitingForInitialSearch">
               <tabs></tabs>
               <result-listing />
               <load-more />
           </template>
           <banner zone="Bottom"></banner>
       </div>
   </script>

3. Add a template override for the LoadMore component if necessary

   <script id="vue-hawksearch-load-more" type="x-template">
       <div class="text-center">
           <button v-if="!noMoreResults" v-on:click="loadMoreResults">Load More</button>
       </div>
   </script>

4. Include the file in the project and make it an Embedded resource in the Visual Studio solution.

5. Save, build and reload the site.