Pagination Loader

<div x-data="paginationLoader()"
     class="mt-6 flex flex-col items-center text-center"
     :class="[
        size === 'small' ? 'gap-2' : '',
        size === 'medium' ? 'gap-4' : '',
        size === 'large' ? 'gap-6' : ''
    ]"
>
    <div class="text-black/72 text-body-base">
        Page <span x-text="currentPage" class="font-semibold"></span> sur <span x-text="totalPages" class="font-bold"></span>
    </div>

    <div class="inline-flex justify-center items-center gap-2.5">
        <template x-if="!isLoading">
            {% render "@template-button" with {
                color: 'uno',
                size: size == 'small' ? "sm" : size == 'medium' ? 'md' : "lg",
                label: 'Afficher plus',
                icon: {
                    name: "heroicons--arrow-left-outline",
                },
                button_attribute: ("@click=\"loadMore\"")|replace({'\"': '"'})
            } %}
        </template>

        <template x-if="isLoading">
            {% set svgSize = size == 'small' ? 24 : size == 'medium' ? 40 : 56 %}
            <svg class="animate-spin" width="{{ svgSize }}" height="{{ svgSize }}" viewBox="0 0 57 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g id="Frame 6">
                    <g clip-path="url(#paint0_angular_16067_692_clip_path)" data-figma-skip-parse="true">
                        <g transform="matrix(0.028 0 0 0.028 28.5 28)">
                            <foreignObject x="-1000" y="-1000" width="2000" height="2000">
                                <div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(from 90deg,rgba(74, 138, 166, 0.0001) 0deg,rgba(31, 107, 133, 1) 359.964deg,rgba(74, 138, 166, 0.0001) 360deg);height:100%;width:100%;opacity:1"></div>
                            </foreignObject>
                        </g>
                    </g>
                    <path id="track" d="M56.5 28C56.5 43.464 43.964 56 28.5 56C13.036 56 0.5 43.464 0.5 28C0.5 12.536 13.036 0 28.5 0C43.964 0 56.5 12.536 56.5 28ZM10.3 28C10.3 38.0516 18.4484 46.2 28.5 46.2C38.5516 46.2 46.7 38.0516 46.7 28C46.7 17.9484 38.5516 9.8 28.5 9.8C18.4484 9.8 10.3 17.9484 10.3 28Z" data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:0.12156862765550613,&#34;g&#34;:0.41960784792900085,&#34;b&#34;:0.52156865596771240,&#34;a&#34;:1.0},&#34;position&#34;:0.99989998340606689},{&#34;color&#34;:{&#34;r&#34;:0.29019609093666077,&#34;g&#34;:0.54117649793624878,&#34;b&#34;:0.65098041296005249,&#34;a&#34;:9.9999997473787516e-05},&#34;position&#34;:1.0}],&#34;stopsVar&#34;:[{&#34;color&#34;:{&#34;r&#34;:0.12156862765550613,&#34;g&#34;:0.41960784792900085,&#34;b&#34;:0.52156865596771240,&#34;a&#34;:1.0},&#34;position&#34;:0.99989998340606689},{&#34;color&#34;:{&#34;r&#34;:0.29019609093666077,&#34;g&#34;:0.54117649793624878,&#34;b&#34;:0.65098041296005249,&#34;a&#34;:9.9999997473787516e-05},&#34;position&#34;:1.0}],&#34;transform&#34;:{&#34;m00&#34;:56.0,&#34;m01&#34;:0.0,&#34;m02&#34;:0.50,&#34;m10&#34;:0.0,&#34;m11&#34;:56.0,&#34;m12&#34;:0.0},&#34;opacity&#34;:1.0,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}"/>
                </g>
                <defs>
                    <clipPath id="paint0_angular_16067_692_clip_path">
                        <path id="track" d="M56.5 28C56.5 43.464 43.964 56 28.5 56C13.036 56 0.5 43.464 0.5 28C0.5 12.536 13.036 0 28.5 0C43.964 0 56.5 12.536 56.5 28ZM10.3 28C10.3 38.0516 18.4484 46.2 28.5 46.2C38.5516 46.2 46.7 38.0516 46.7 28C46.7 17.9484 38.5516 9.8 28.5 9.8C18.4484 9.8 10.3 17.9484 10.3 28Z"/>
                    </clipPath>
                </defs>
            </svg>
        </template>
    </div>
</div>

<script>
	function paginationLoader() {
		return {
			currentPage: {{ currentPage }},
			totalPages: {{ totalPages }},
			size: '{{ size }}', // 'small' | 'medium' | 'large'
			isLoading: false,

			async loadMore() {
				this.isLoading = true;
				await new Promise(r => setTimeout(r, 1500));
				if (this.currentPage < this.totalPages) {
					this.currentPage++;
				}
				this.isLoading = false;
			}
		}
	}
</script>