Button Dropdown: Lazy Loading

<div style="display: flex;">
       <div onclick="dropdown.showNextResultsLoadingIndicator(true)" style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
           DEMO
           Show Next Results Loading Indicator
       </div>

       <div onclick="dropdown.showNextResultsLoadingIndicator(false)" style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
           DEMO
           Hide Next Results Loading Indicator
       </div>

       <div onclick="dropdown.showPreviousResultsLoadingIndicator(true)" style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
           DEMO
           Show Previous Results Loading Indicator
       </div>

       <div onclick="dropdown.showPreviousResultsLoadingIndicator(false)" style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
           DEMO
           Hide Previous Results Loading Indicator
       </div>
   </div>

   <div class="acl-dropdown-demo-example__container">
       <div class="acl-dropdown-demo-example">
           <div>
               <div class="acl-dropdown acl-button-dropdown acl-dropdown-demo-1" id="single-select-dropdown-example-id" data-dropdown-type="button-single-select">

                   <div class="acl-dropdown__cta acl-button-dropdown__field">
                       <div class="acl-dropdown__cta-link acl-button-dropdown__cta-link"></div>
                       <button class="acl-button acl-button--raised">
                           <span class="acl-button__label">Click here</span>
                       </button>
                   </div>

                   <div class="acl-dropdown__results acl-button-dropdown__results" data-dropdown-select="true">

                       <div class="acl-select-dropdown__results--load-previous">
                           <div class="acl-loading-dots__container">
                               <div class="acl-loading-dots">
                                   <div class="bounce1"></div>
                                   <div class="bounce2"></div>
                                   <div class="bounce3"></div>
                               </div>
                           </div>
                       </div>

                       <div class="acl-dropdown__items acl-button-dropdown__items" style="max-height: 250px;">
                       </div>

                       <div class="acl-select-dropdown__results--load-next">
                           <div class="acl-loading-dots__container">
                               <div class="acl-loading-dots">
                                   <div class="bounce1"></div>
                                   <div class="bounce2"></div>
                                   <div class="bounce3"></div>
                               </div>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </div>

   <script>
       const results = [{
               id: 'prev',
               value: 'Preview',
           },
           {
               id: 'copy',
               value: 'Copy Link'
           },
           {
               id: 'download',
               value: 'Download'
           },
           {
               id: 'rename',
               value: 'Rename'
           },
           {
               id: 'Sort',
               value: 'Sort'
           },
           {
               id: 'Disable',
               value: 'Disable',
           },
           {
               id: 'Duplicate',
               value: 'Duplicate'
           },
           {
               id: 'Fork',
               value: 'Fork'
           },
           {
               id: 'Push',
               value: 'Push'
           },
           {
               id: 'Remove',
               value: 'Remove'
           },
           {
               id: 'Highlight',
               value: 'Highlight',
           },
           {
               id: 'Focus',
               value: 'Focus'
           },
           {
               id: 'Alert',
               value: 'Alert'
           },
           {
               id: 'Subscribe',
               value: 'Subscribe'
           },
           {
               id: 'Follow',
               value: 'Follow'
           }
       ];
       // Default Button //
       const dropdownEl = document.querySelector(".acl-dropdown-demo-1");
       const dropdown = new acl.ACLDropdownSingleSelect(dropdownEl, results, {
           lazyLoading: true,
           initiallyPopulateResults: true,
           scrollEventPercentageOffset: 70,
           scrollEventDebounceValue: 2000,
       });
       dropdownEl.addEventListener('dropdownitemclicked',
           function(e) {
               console.log('dropdownitemclicked', e.detail);
           }, false);
       dropdownEl.addEventListener('scrolledtotop',
           function(e) {
               console.log('Custom Event: scrolledtotop');
           }, false);
       dropdownEl.addEventListener('scrolledtobottom',
           function(e) {
               console.log('Custom Event: scrolledtobottom');
           }, false);
       // Default Button - END //
   </script>

   <!-- Styling used for Demo purposes only. -->
   <style>
       .acl-dropdown-demo-example {
           display: flex;
           justify-content: center;
           margin: 25px 25px 25px 0;
       }

       .acl-dropdown-demo-example__container {
           display: flex;
       }
   </style>