View difference between Paste ID: iJigX8R9 and UXPhvyH3

 <infinite-scroll data-next="{{ next_page }}" data-page-size="{{ page_size }}" data-end-text="{{ end_text }}">
   {% if page_size > 1 %}
     <div class="loadingBox">
       <span id="loading_1" class="loadingScroll">&nbsp</span>
       <span id="loading_2" class="loadingScroll">&nbsp</span>
       <span id="loading_3" class="loadingScroll">&nbsp</span>
       <span id="loading_4" class="loadingScroll">&nbsp</span>
       <span id="loading_5" class="loadingScroll">&nbsp</span>
       <span id="loading_6" class="loadingScroll">&nbsp</span>
       <span id="loading_7" class="loadingScroll">&nbsp</span>
       <span id="loading_8" class="loadingScroll">&nbsp</span>
     </div>
   {% endif %}
 </infinite-scroll>
 <div class="scrollToTopButton">Scroll To Top</div>
 <style>
   infinite-scroll {
     position: relative;
     width: 100%;
     font-weight: 600;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.5s ease;
   }
   .loadingBox {
     position: relative;
     width: 234px;
     height: 28px;
     margin: auto;
   }
   .loadingScroll {
     position: absolute;
     top: 0;
     background-color: rgb(0, 0, 0);
     width: 28px;
     height: 28px;
     animation-name: loading_animation;
     -o-animation-name: loading_animation;
     -ms-animation-name: loading_animation;
     -webkit-animation-name: loading_animation;
     -moz-animation-name: loading_animation;
     animation-duration: 1.5s;
     -o-animation-duration: 1.5s;
     -ms-animation-duration: 1.5s;
     -webkit-animation-duration: 1.5s;
     -moz-animation-duration: 1.5s;
     animation-iteration-count: infinite;
     -o-animation-iteration-count: infinite;
     -ms-animation-iteration-count: infinite;
     -webkit-animation-iteration-count: infinite;
     -moz-animation-iteration-count: infinite;
     animation-direction: normal;
     -o-animation-direction: normal;
     -ms-animation-direction: normal;
     -webkit-animation-direction: normal;
     -moz-animation-direction: normal;
     transform: scale(0.3);
     -o-transform: scale(0.3);
     -ms-transform: scale(0.3);
     -webkit-transform: scale(0.3);
     -moz-transform: scale(0.3);
   }
   .scrollToTopButton {
     position: fixed;
     bottom: 20px;
     right: 149px;
     background: #ececec;
     padding: 5px 10px;
     z-index: 1;
     cursor: pointer;
     border-radius: 5px;
   }
   #loading_1 {
     left: 0;
     animation-delay: 0.6s;
     -o-animation-delay: 0.6s;
     -ms-animation-delay: 0.6s;
     -webkit-animation-delay: 0.6s;
     -moz-animation-delay: 0.6s;
   }
   #loading_2 {
     left: 29px;
     animation-delay: 0.75s;
     -o-animation-delay: 0.75s;
     -ms-animation-delay: 0.75s;
     -webkit-animation-delay: 0.75s;
     -moz-animation-delay: 0.75s;
   }
   #loading_3 {
     left: 58px;
     animation-delay: 0.9s;
     -o-animation-delay: 0.9s;
     -ms-animation-delay: 0.9s;
     -webkit-animation-delay: 0.9s;
     -moz-animation-delay: 0.9s;
   }
   #loading_4 {
     left: 88px;
     animation-delay: 1.05s;
     -o-animation-delay: 1.05s;
     -ms-animation-delay: 1.05s;
     -webkit-animation-delay: 1.05s;
     -moz-animation-delay: 1.05s;
   }
   #loading_5 {
     left: 117px;
     animation-delay: 1.2s;
     -o-animation-delay: 1.2s;
     -ms-animation-delay: 1.2s;
     -webkit-animation-delay: 1.2s;
     -moz-animation-delay: 1.2s;
   }
   #loading_6 {
     left: 146px;
     animation-delay: 1.35s;
     -o-animation-delay: 1.35s;
     -ms-animation-delay: 1.35s;
     -webkit-animation-delay: 1.35s;
     -moz-animation-delay: 1.35s;
   }
   #loading_7 {
     left: 175px;
     animation-delay: 1.5s;
     -o-animation-delay: 1.5s;
     -ms-animation-delay: 1.5s;
     -webkit-animation-delay: 1.5s;
     -moz-animation-delay: 1.5s;
   }
   #loading_8 {
     left: 205px;
     animation-delay: 1.64s;
     -o-animation-delay: 1.64s;
     -ms-animation-delay: 1.64s;
     -webkit-animation-delay: 1.64s;
     -moz-animation-delay: 1.64s;
   }
 
   /* Pristege */
   [class^="pagination"], [class^="Pagination"], .pagination {
     display: none !important;
   }
 
   .js .features--show-element-staggering .ProductList--grid div.ProductItem {
     visibility: visible;
   }
 
   .js .product-card[reveal-on-scroll="true"] {
     opacity: 1;
   }
 
   @keyframes loading_animation {
     0% {
       transform: scale(1);
       background-color: rgb(0, 0, 0);
     }
     100% {
       transform: scale(0.3);
       background-color: rgb(255, 255, 255);
     }
   }
   @-o-keyframes loading_animation {
     0% {
       -o-transform: scale(1);
       background-color: rgb(0, 0, 0);
     }
     100% {
       -o-transform: scale(0.3);
       background-color: rgb(255, 255, 255);
     }
   }
   @-ms-keyframes loading_animation {
     0% {
       -ms-transform: scale(1);
       background-color: rgb(0, 0, 0);
     }
     100% {
       -ms-transform: scale(0.3);
       background-color: rgb(255, 255, 255);
     }
   }
   @-webkit-keyframes loading_animation {
     0% {
       -webkit-transform: scale(1);
       background-color: rgb(0, 0, 0);
     }
     100% {
       -webkit-transform: scale(0.3);
       background-color: rgb(255, 255, 255);
     }
   }
   @-moz-keyframes loading_animation {
     0% {
       -moz-transform: scale(1);
       background-color: rgb(0, 0, 0);
     }
     100% {
       -moz-transform: scale(0.3);
       background-color: rgb(255, 255, 255);
     }
   }
 </style>
 <script>
   class InfiniteScroll extends HTMLElement {
   constructor() {
     super();
     this.initGrid();
     this.init();
     this.page = 1;
     this.scrollToTopBtn = document.querySelector(".scrollToTopButton");
     this.scrollToTopBtn.addEventListener(
       "click",
       this.scrollToTopFx.bind(this)
     );
   }
 
   initGrid() {
     const gridOptions = [".ProductListWrapper", "#main-collection-product-grid", "#product-grid", ".product-list"];
     for (let gridName of gridOptions) {
       let grid = document.querySelector(gridName);
       if (grid) {
         this.gridName = gridName;
         this.gridContainer = grid;
         break;
       }
     }
   }
 
   init() {
     const observer = new IntersectionObserver(this.revealItem.bind(this), {
       root: null,
       threshold: 0.05,
     });
     observer.observe(this);
   }
 
   fetchNextPage(e) {
     if (e <= this.dataset.pageSize) {
       const t = `{{ shop.url }}/${this.dataset.next}`;
       const i = new URL(t);
       i.searchParams.set("page", e);
       const r = i.href;
       fetch(`${r}`, { method: "GET", headers: { "Content-Type": "text/html" } })
         .then((e) => e.text())
         .then((e) => {
           const t = new DOMParser().parseFromString(e, "text/html");
           const i = t.querySelector(this.gridName).innerHTML;
           this.gridContainer.insertAdjacentHTML("beforeend", i);
         })
         .catch((e) => {
           console.error("Error:", e);
         });
     }
     if (e == this.dataset.pageSize) {
       this.innerHTML = `<h2>${this.dataset.endText}</h2>`;
     }
   }
   revealItem(e, t) {
     const [i] = e;
     if (!i.isIntersecting) return;
     if (i.target) {
       this.page++;
       this.fetchNextPage(this.page);
     }
     if (this.page == this.dataset.pageSize) {
       t.unobserve(i.target);
     }
   }
   scrollToTopFx(e) {
     document.body.scrollTop = 0;
     document.documentElement.scrollTop = 0;
     e.currentTarget.style.display = "none";
   }
 }
 customElements.define("infinite-scroll", InfiniteScroll);
 </script>