From 4e7406a98edfef43347ad19917e80d99ae689c66 Mon Sep 17 00:00:00 2001
From: Jade Geels <jade@justbetter.nl>
Date: Wed, 22 Jan 2025 14:31:01 +0100
Subject: [PATCH 01/13] Fix layout shift on thumbnails & quantity

---
 resources/views/components/quantity.blade.php |   2 +
 .../product/partials/gallery/popup.blade.php  |   4 +-
 .../product/partials/gallery/slider.blade.php |  27 +++--
 .../partials/gallery/thumbnails.blade.php     | 104 +++++++++++-------
 .../views/product/partials/images.blade.php   |  19 +---
 5 files changed, 90 insertions(+), 66 deletions(-)

diff --git a/resources/views/components/quantity.blade.php b/resources/views/components/quantity.blade.php
index 940abf093..689229add 100644
--- a/resources/views/components/quantity.blade.php
+++ b/resources/views/components/quantity.blade.php
@@ -6,6 +6,7 @@
 <quantity-select v-slot="qtySelect" {{ $attributes }}>
     <div class="flex items-center justify-center border rounded bg-white h-12 self-start">
         <button
+            disabled
             v-on:click.prevent="qtySelect.decrease"
             v-bind:disabled="!qtySelect.decreasable"
             aria-label="@lang('Decrease')"
@@ -17,6 +18,7 @@ class="shrink-0 pl-2.5 text disabled:cursor-not-allowed disabled:opacity-50"
             name="qty"
             type="number"
             dusk="qty"
+            value="1"
             class="outline-0 ring-0 border-none w-12 bg-transparent font-medium text-center px-0 sm:text-base focus:ring-transparent"
             aria-label="@lang('Quantity')"
             {{ $attributes }}
diff --git a/resources/views/product/partials/gallery/popup.blade.php b/resources/views/product/partials/gallery/popup.blade.php
index 0e5b63a25..dc2acbbab 100644
--- a/resources/views/product/partials/gallery/popup.blade.php
+++ b/resources/views/product/partials/gallery/popup.blade.php
@@ -1,4 +1,4 @@
-<div v-if="images.length && zoomed" class="fixed inset-0 bg-white cursor-zoom-out flex z-popup">
+<div v-cloak v-if="images.length && zoomed" class="fixed inset-0 bg-white cursor-zoom-out flex z-popup">
     <div class="flex flex-1 items-center justify-center" v-on:click.prevent="toggleZoom">
         <img
             :src="config.media_url + '/catalog/product' + images[active]"
@@ -16,4 +16,4 @@ class="object-contain max-h-full mx-auto block"
     <button class="z-popup-actions top-1/2 right-3 -translate-y-1/2 absolute" v-if="active != images.length-1" v-on:click="change(active+1)" aria-label="@lang('Next')">
         <x-heroicon-o-chevron-right class="size-8 text-muted" />
     </button>
-</div>
\ No newline at end of file
+</div>
diff --git a/resources/views/product/partials/gallery/slider.blade.php b/resources/views/product/partials/gallery/slider.blade.php
index 029ac8967..82835de99 100644
--- a/resources/views/product/partials/gallery/slider.blade.php
+++ b/resources/views/product/partials/gallery/slider.blade.php
@@ -1,23 +1,28 @@
 <div class="relative" v-if="images.length">
     <a
-        :href="config.media_url + '/catalog/product' + images[active]"
-        class="flex items-center justify-center border rounded p-5 h-[440px] cursor-zoom-in"
         v-on:click.prevent="toggleZoom"
+        v-bind:href="config.media_url + '/catalog/product' + images[active]"
+        class="flex h-[440px] cursor-zoom-in items-center justify-center rounded border p-5"
     >
         <img
-            :src="'/storage/{{ config('rapidez.store') }}/resizes/400/magento/catalog/product' + images[active] + '.webp'"
+            {{-- src should always be above v-bind:src --}}
+            src="/storage/{{ config('rapidez.store') }}/resizes/400/magento/catalog/product/{{ Arr::first($product->images) }}.webp"
+            v-bind:src="'/storage/{{ config('rapidez.store') }}/resizes/400/magento/catalog/product' + images[active] + '.webp'"
             alt="{{ $product->name }}"
-            class="object-contain max-h-full"
+            class="max-h-full object-contain"
             width="400"
             height="400"
         />
     </a>
-    <button class="z-10 top-1/2 left-3 -translate-y-1/2 absolute" v-if="active" v-on:click="change(active-1)" aria-label="@lang('Prev')">
-        <x-heroicon-o-chevron-left class="size-8 text-inactive" />
-    </button>
-    <button class="z-10 top-1/2 right-3 -translate-y-1/2 absolute" v-if="active != images.length-1" v-on:click="change(active+1)" aria-label="@lang('Next')">
-        <x-heroicon-o-chevron-right class="size-8 text-inactive" />
-    </button>
+
+    @if (count($product->images ?? []) > 1)
+        <button class="z-10 top-1/2 left-3 -translate-y-1/2 absolute" v-cloak v-if="active" v-on:click="change(active-1)" aria-label="@lang('Prev')">
+            <x-heroicon-o-chevron-left class="size-8 text-inactive" />
+        </button>
+        <button class="z-10 top-1/2 right-3 -translate-y-1/2 absolute" v-if="active != images.length-1" v-on:click="change(active+1)" aria-label="@lang('Next')">
+            <x-heroicon-o-chevron-right class="size-8 text-inactive" />
+        </button>
+    @endif
 </div>
 
-<x-rapidez::no-image v-else class="h-96 rounded" />
+<x-rapidez::no-image v-else v-cloak class="h-96 rounded" />
diff --git a/resources/views/product/partials/gallery/thumbnails.blade.php b/resources/views/product/partials/gallery/thumbnails.blade.php
index de5cd213e..aacdc7207 100644
--- a/resources/views/product/partials/gallery/thumbnails.blade.php
+++ b/resources/views/product/partials/gallery/thumbnails.blade.php
@@ -1,40 +1,70 @@
-@php($breakpoints = ['xl' => 7, 'lg' => 5, 'md' => 4, 'sm' => 3, 'xs' => 4])
-<div v-if="images.length > 1" class="flex mt-3 gap-2">
-    <button
-        v-for="(image, imageId) in images.slice(0, {{ max($breakpoints) }})"
-        class="flex items-center justify-center bg-white border rounded p-1.5 aspect-square max-w-24 flex-1 transition-all outline-transparent overflow-hidden relative"
-        :class="{
-            'outline outline-1 !outline-primary border-primary': active == imageId,
-            'xl:hidden': imageId > {{ $breakpoints['xl'] }},
-            'lg:max-xl:hidden': imageId > {{ $breakpoints['lg'] }},
-            'md:max-lg:hidden': imageId > {{ $breakpoints['md'] }},
-            'sm:max-md:hidden': imageId > {{ $breakpoints['sm'] }},
-            'max-sm:hidden': imageId > {{ $breakpoints['xs'] }}
-        }"
-        @click="change(imageId)"
-    >
-        <img
-            :src="'/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product' + image + '.webp'"
-            alt="{{ $product->name }}"
-            class="object-contain block w-auto max-h-full"
-            width="80"
-            height="80"
-        />
-        <span
-            v-if="(imageId + 1) < images.length"
-            v-on:click="toggleZoom()"
-            class="absolute inset-0 items-center justify-center bg-black/20 hidden"
-            :class="{
-                'xl:flex': imageId === {{ $breakpoints['xl'] }},
-                'lg:max-xl:flex': imageId === {{ $breakpoints['lg'] }},
-                'md:max-lg:flex': imageId === {{ $breakpoints['md'] }},
-                'sm:max-md:flex': imageId === {{ $breakpoints['sm'] }},
-                'max-sm:flex': imageId === {{ $breakpoints['xs'] }}
+{{--
+    In this file we avoid layout shifts on the page by pre-populating the possible amount of thumbnail slots.
+    On page load all of the images come from PHP, using `@unless (...) v-cloak @endunless` to hide things that
+    shouldn't be shown, but need a placeholder element.
+    After Vue gets loaded in, it will take over and replace the `v-cloak`s with the `v-if`s, which means that
+    the two conditionals should be identical to avoid layout shifts.
+
+    The `$breakpoints` variable determines how many images are shown on each individual breakpoint.
+--}}
+
+@php($breakpoints = ['xl' => 7, 'lg' => 5, 'md' => 7, 'sm' => 5, 'xs' => 3])
+
+<div class="mt-3 flex gap-2">
+    @for ($imageId = 0; $imageId < max($breakpoints); $imageId++)
+        <button
+            @unless ($imageId < count($product->images)) v-cloak @endunless
+            v-if="{{ $imageId }} < images.length"
+            @class([
+                'max-w-24 relative flex aspect-square flex-1 items-center justify-center overflow-hidden rounded border bg-white p-1.5 outline-primary transition-all',
+                'outline outline-1 border-primary' => $imageId == 0,
+                'xl:hidden' => $imageId >= $breakpoints['xl'],
+                'lg:max-xl:hidden' => $imageId >= $breakpoints['lg'],
+                'md:max-lg:hidden' => $imageId >= $breakpoints['md'],
+                'sm:max-md:hidden' => $imageId >= $breakpoints['sm'],
+                'max-sm:hidden' => $imageId >= $breakpoints['xs'],
+            ])
+            v-bind:class="{
+                'outline outline-1 border-primary': active === {{ $imageId }},
+                '!outline-transparent !outline-0 !border-border': active !== {{ $imageId }},
             }"
+            v-on:click="change({{ $imageId }})"
         >
-            <span class="size-9 flex items-center justify-center rounded-full shadow-lg shadow-default bg-white text-sm font-bold text">
-                +@{{ images.length - (imageId + 1) }}
-            </span>
-        </span>
-    </button>
+            <img
+                {{-- Note: always put the `src` before a `v-bind:src` or it will not work --}}
+                @if($imageId < count($product->images))
+                    src="/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product/{{ $product->images[$imageId] }}.webp"
+                @endif
+                v-bind:src="'/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product/' + images[{{ $imageId }}] + '.webp'"
+                alt="{{ $product->name }}"
+                class="block max-h-full w-auto object-contain"
+                width="80"
+                height="80"
+            />
+
+            <div
+                @unless (count($product->images) - $imageId - 1) v-cloak @endunless
+                v-if="images.length - {{ $imageId }} - 1"
+            >
+                <span
+                    @class([
+                        'absolute inset-0 hidden items-center justify-center bg-black/20',
+                        'xl:flex' => $imageId + 1 === $breakpoints['xl'],
+                        'lg:max-xl:flex' => $imageId + 1 === $breakpoints['lg'],
+                        'md:max-lg:flex' => $imageId + 1 === $breakpoints['md'],
+                        'sm:max-md:flex' => $imageId + 1 === $breakpoints['sm'],
+                        'max-sm:flex' => $imageId + 1 === $breakpoints['xs'],
+                    ])
+                    v-on:click="toggleZoom"
+                >
+                    <span
+                        class="size-9 flex items-center justify-center rounded-full bg-white text-sm font-bold text shadow-lg"
+                        v-text="'+' + (images.length - {{ $imageId }} - 1)"
+                    >
+                        +{{ count($product->images) - $imageId - 1 }}
+                    </span>
+                </span>
+            </div>
+        </button>
+    @endfor
 </div>
diff --git a/resources/views/product/partials/images.blade.php b/resources/views/product/partials/images.blade.php
index a8e9c54b7..b83e44148 100644
--- a/resources/views/product/partials/images.blade.php
+++ b/resources/views/product/partials/images.blade.php
@@ -4,28 +4,15 @@
             @include('rapidez::wishlist.button')
         </div>
     @endif
-    @if (count($product->images))
-        <div class="absolute inset-0 flex">
-            <div class="h-[440px] items-center justify-center rounded p-5 border sticky top-5 w-full">
-                <img
-                    class="max-h-full w-full object-contain"
-                    src="/storage/{{ config('rapidez.store') }}/resizes/400/magento/catalog/product{{ $product->images[0] }}.webp"
-                    alt="{{ $product->name }}"
-                    width="400"
-                    height="400"
-                />
-            </div>
-        </div>
-    @endif
 
-    <images v-cloak>
+    <images>
         <div class="flex-1" slot-scope="{ images, active, zoomed, toggleZoom, change }">
             <div class="sticky top-5 bg-white">
                 @include('rapidez::product.partials.gallery.slider')
-                @include('rapidez::product.partials.gallery.thumbnails')
+                @includeWhen(count($product->images) > 1, 'rapidez::product.partials.gallery.thumbnails')
             </div>
 
             @include('rapidez::product.partials.gallery.popup')
         </div>
     </images>
-</div>
\ No newline at end of file
+</div>

From 105b802341bf2016ceab6c0ea44bcedac07375f6 Mon Sep 17 00:00:00 2001
From: Jade-GG <Jade-GG@users.noreply.github.com>
Date: Wed, 22 Jan 2025 13:31:26 +0000
Subject: [PATCH 02/13] Apply fixes from Duster

---
 resources/views/product/partials/gallery/thumbnails.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/product/partials/gallery/thumbnails.blade.php b/resources/views/product/partials/gallery/thumbnails.blade.php
index aacdc7207..bae0296fa 100644
--- a/resources/views/product/partials/gallery/thumbnails.blade.php
+++ b/resources/views/product/partials/gallery/thumbnails.blade.php
@@ -32,7 +32,7 @@
         >
             <img
                 {{-- Note: always put the `src` before a `v-bind:src` or it will not work --}}
-                @if($imageId < count($product->images))
+                @if ($imageId < count($product->images))
                     src="/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product/{{ $product->images[$imageId] }}.webp"
                 @endif
                 v-bind:src="'/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product/' + images[{{ $imageId }}] + '.webp'"

From 0033dd720495574b5961de42afa3a60bd26fa4d4 Mon Sep 17 00:00:00 2001
From: Jade Geels <jade@justbetter.nl>
Date: Wed, 22 Jan 2025 14:41:58 +0100
Subject: [PATCH 03/13] Minimize DOM usage a tiny bit

---
 .../partials/gallery/thumbnails.blade.php     | 40 ++++++++++---------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/resources/views/product/partials/gallery/thumbnails.blade.php b/resources/views/product/partials/gallery/thumbnails.blade.php
index aacdc7207..38f39a68e 100644
--- a/resources/views/product/partials/gallery/thumbnails.blade.php
+++ b/resources/views/product/partials/gallery/thumbnails.blade.php
@@ -42,29 +42,31 @@ class="block max-h-full w-auto object-contain"
                 height="80"
             />
 
-            <div
-                @unless (count($product->images) - $imageId - 1) v-cloak @endunless
-                v-if="images.length - {{ $imageId }} - 1"
-            >
-                <span
-                    @class([
-                        'absolute inset-0 hidden items-center justify-center bg-black/20',
-                        'xl:flex' => $imageId + 1 === $breakpoints['xl'],
-                        'lg:max-xl:flex' => $imageId + 1 === $breakpoints['lg'],
-                        'md:max-lg:flex' => $imageId + 1 === $breakpoints['md'],
-                        'sm:max-md:flex' => $imageId + 1 === $breakpoints['sm'],
-                        'max-sm:flex' => $imageId + 1 === $breakpoints['xs'],
-                    ])
-                    v-on:click="toggleZoom"
+            @if($imageId + 1 >= min($breakpoints))
+                <div
+                    @unless (count($product->images) - $imageId - 1) v-cloak @endunless
+                    v-if="images.length - {{ $imageId }} - 1"
                 >
                     <span
-                        class="size-9 flex items-center justify-center rounded-full bg-white text-sm font-bold text shadow-lg"
-                        v-text="'+' + (images.length - {{ $imageId }} - 1)"
+                        @class([
+                            'absolute inset-0 hidden items-center justify-center bg-black/20',
+                            'xl:flex' => $imageId + 1 === $breakpoints['xl'],
+                            'lg:max-xl:flex' => $imageId + 1 === $breakpoints['lg'],
+                            'md:max-lg:flex' => $imageId + 1 === $breakpoints['md'],
+                            'sm:max-md:flex' => $imageId + 1 === $breakpoints['sm'],
+                            'max-sm:flex' => $imageId + 1 === $breakpoints['xs'],
+                        ])
+                        v-on:click="toggleZoom"
                     >
-                        +{{ count($product->images) - $imageId - 1 }}
+                        <span
+                            class="size-9 flex items-center justify-center rounded-full bg-white text-sm font-bold text shadow-lg"
+                            v-text="'+' + (images.length - {{ $imageId }} - 1)"
+                        >
+                            +{{ count($product->images) - $imageId - 1 }}
+                        </span>
                     </span>
-                </span>
-            </div>
+                </div>
+            @endif
         </button>
     @endfor
 </div>

From 55ba0c07c5fc585e0c3e3256a1cc1ca3b7608503 Mon Sep 17 00:00:00 2001
From: Jade-GG <Jade-GG@users.noreply.github.com>
Date: Wed, 22 Jan 2025 13:42:30 +0000
Subject: [PATCH 04/13] Apply fixes from Duster

---
 resources/views/product/partials/gallery/thumbnails.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/product/partials/gallery/thumbnails.blade.php b/resources/views/product/partials/gallery/thumbnails.blade.php
index 8dab65eb1..4c912c47a 100644
--- a/resources/views/product/partials/gallery/thumbnails.blade.php
+++ b/resources/views/product/partials/gallery/thumbnails.blade.php
@@ -42,7 +42,7 @@ class="block max-h-full w-auto object-contain"
                 height="80"
             />
 
-            @if($imageId + 1 >= min($breakpoints))
+            @if ($imageId + 1 >= min($breakpoints))
                 <div
                     @unless (count($product->images) - $imageId - 1) v-cloak @endunless
                     v-if="images.length - {{ $imageId }} - 1"

From 4b7688e0eed16b3544881c64c34a6b30a5da671c Mon Sep 17 00:00:00 2001
From: Jade Geels <jade@justbetter.nl>
Date: Wed, 22 Jan 2025 14:44:02 +0100
Subject: [PATCH 05/13] Improve DOM minification

---
 resources/views/product/partials/gallery/thumbnails.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/product/partials/gallery/thumbnails.blade.php b/resources/views/product/partials/gallery/thumbnails.blade.php
index 4c912c47a..ab8e2d670 100644
--- a/resources/views/product/partials/gallery/thumbnails.blade.php
+++ b/resources/views/product/partials/gallery/thumbnails.blade.php
@@ -42,7 +42,7 @@ class="block max-h-full w-auto object-contain"
                 height="80"
             />
 
-            @if ($imageId + 1 >= min($breakpoints))
+            @if (in_array($imageId + 1, $breakpoints))
                 <div
                     @unless (count($product->images) - $imageId - 1) v-cloak @endunless
                     v-if="images.length - {{ $imageId }} - 1"

From fdefb213f6136687cb5cfcb2be9872528435e597 Mon Sep 17 00:00:00 2001
From: Jade Geels <jade@justbetter.nl>
Date: Wed, 22 Jan 2025 14:53:26 +0100
Subject: [PATCH 06/13] Move showMore to separate partial

---
 .../partials/gallery/thumbnails.blade.php     | 29 ++-----------------
 .../gallery/thumbnails/showMore.blade.php     | 25 ++++++++++++++++
 2 files changed, 28 insertions(+), 26 deletions(-)
 create mode 100644 resources/views/product/partials/gallery/thumbnails/showMore.blade.php

diff --git a/resources/views/product/partials/gallery/thumbnails.blade.php b/resources/views/product/partials/gallery/thumbnails.blade.php
index ab8e2d670..218f05909 100644
--- a/resources/views/product/partials/gallery/thumbnails.blade.php
+++ b/resources/views/product/partials/gallery/thumbnails.blade.php
@@ -31,7 +31,7 @@
             v-on:click="change({{ $imageId }})"
         >
             <img
-                {{-- Note: always put the `src` before a `v-bind:src` or it will not work --}}
+                {{-- Note: always put the base `src` before a `v-bind:src` or it will not work --}}
                 @if ($imageId < count($product->images))
                     src="/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product/{{ $product->images[$imageId] }}.webp"
                 @endif
@@ -42,31 +42,8 @@ class="block max-h-full w-auto object-contain"
                 height="80"
             />
 
-            @if (in_array($imageId + 1, $breakpoints))
-                <div
-                    @unless (count($product->images) - $imageId - 1) v-cloak @endunless
-                    v-if="images.length - {{ $imageId }} - 1"
-                >
-                    <span
-                        @class([
-                            'absolute inset-0 hidden items-center justify-center bg-black/20',
-                            'xl:flex' => $imageId + 1 === $breakpoints['xl'],
-                            'lg:max-xl:flex' => $imageId + 1 === $breakpoints['lg'],
-                            'md:max-lg:flex' => $imageId + 1 === $breakpoints['md'],
-                            'sm:max-md:flex' => $imageId + 1 === $breakpoints['sm'],
-                            'max-sm:flex' => $imageId + 1 === $breakpoints['xs'],
-                        ])
-                        v-on:click="toggleZoom"
-                    >
-                        <span
-                            class="size-9 flex items-center justify-center rounded-full bg-white text-sm font-bold text shadow-lg"
-                            v-text="'+' + (images.length - {{ $imageId }} - 1)"
-                        >
-                            +{{ count($product->images) - $imageId - 1 }}
-                        </span>
-                    </span>
-                </div>
-            @endif
+            {{-- Only include the showMore if it's actually possible to be visible --}}
+            @includeWhen(in_array($imageId + 1, $breakpoints), 'rapidez::product.partials.gallery.thumbnails.showMore')
         </button>
     @endfor
 </div>
diff --git a/resources/views/product/partials/gallery/thumbnails/showMore.blade.php b/resources/views/product/partials/gallery/thumbnails/showMore.blade.php
new file mode 100644
index 000000000..d231a84e6
--- /dev/null
+++ b/resources/views/product/partials/gallery/thumbnails/showMore.blade.php
@@ -0,0 +1,25 @@
+{{-- This component shows an overlay on the last shown thumbnail if there are more thumbnails after it. --}}
+
+<div
+    @unless (count($product->images) - $imageId - 1) v-cloak @endunless
+    v-if="images.length - {{ $imageId }} - 1"
+>
+    <span
+        @class([
+            'absolute inset-0 hidden items-center justify-center bg-black/20',
+            'xl:flex' => $imageId + 1 === $breakpoints['xl'],
+            'lg:max-xl:flex' => $imageId + 1 === $breakpoints['lg'],
+            'md:max-lg:flex' => $imageId + 1 === $breakpoints['md'],
+            'sm:max-md:flex' => $imageId + 1 === $breakpoints['sm'],
+            'max-sm:flex' => $imageId + 1 === $breakpoints['xs'],
+        ])
+        v-on:click="toggleZoom"
+    >
+        <span
+            class="size-9 flex items-center justify-center rounded-full bg-white text-sm font-bold text shadow-lg"
+            v-text="'+' + (images.length - {{ $imageId }} - 1)"
+        >
+            +{{ count($product->images) - $imageId - 1 }}
+        </span>
+    </span>
+</div>

From 22877ee12c82567797870bd598c90eac5e089d77 Mon Sep 17 00:00:00 2001
From: Jade Geels <jade@justbetter.nl>
Date: Wed, 22 Jan 2025 14:57:51 +0100
Subject: [PATCH 07/13] Update language

---
 resources/views/product/partials/gallery/thumbnails.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/product/partials/gallery/thumbnails.blade.php b/resources/views/product/partials/gallery/thumbnails.blade.php
index 218f05909..3d2149509 100644
--- a/resources/views/product/partials/gallery/thumbnails.blade.php
+++ b/resources/views/product/partials/gallery/thumbnails.blade.php
@@ -1,5 +1,5 @@
 {{--
-    In this file we avoid layout shifts on the page by pre-populating the possible amount of thumbnail slots.
+    In this component we avoid layout shifts on the page by pre-populating the possible amount of thumbnail slots.
     On page load all of the images come from PHP, using `@unless (...) v-cloak @endunless` to hide things that
     shouldn't be shown, but need a placeholder element.
     After Vue gets loaded in, it will take over and replace the `v-cloak`s with the `v-if`s, which means that

From c81a5d3f1d2024dc01e7e02c239b8e1e1fd495ea Mon Sep 17 00:00:00 2001
From: Jade Geels <jade@justbetter.nl>
Date: Thu, 23 Jan 2025 11:04:37 +0100
Subject: [PATCH 08/13] Always show thumbnails, rename show-more

---
 resources/views/product/partials/gallery/thumbnails.blade.php   | 2 +-
 .../thumbnails/{showMore.blade.php => show-more.blade.php}      | 0
 resources/views/product/partials/images.blade.php               | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename resources/views/product/partials/gallery/thumbnails/{showMore.blade.php => show-more.blade.php} (100%)

diff --git a/resources/views/product/partials/gallery/thumbnails.blade.php b/resources/views/product/partials/gallery/thumbnails.blade.php
index 3d2149509..214705112 100644
--- a/resources/views/product/partials/gallery/thumbnails.blade.php
+++ b/resources/views/product/partials/gallery/thumbnails.blade.php
@@ -43,7 +43,7 @@ class="block max-h-full w-auto object-contain"
             />
 
             {{-- Only include the showMore if it's actually possible to be visible --}}
-            @includeWhen(in_array($imageId + 1, $breakpoints), 'rapidez::product.partials.gallery.thumbnails.showMore')
+            @includeWhen(in_array($imageId + 1, $breakpoints), 'rapidez::product.partials.gallery.thumbnails.show-more')
         </button>
     @endfor
 </div>
diff --git a/resources/views/product/partials/gallery/thumbnails/showMore.blade.php b/resources/views/product/partials/gallery/thumbnails/show-more.blade.php
similarity index 100%
rename from resources/views/product/partials/gallery/thumbnails/showMore.blade.php
rename to resources/views/product/partials/gallery/thumbnails/show-more.blade.php
diff --git a/resources/views/product/partials/images.blade.php b/resources/views/product/partials/images.blade.php
index b83e44148..0d235a9a1 100644
--- a/resources/views/product/partials/images.blade.php
+++ b/resources/views/product/partials/images.blade.php
@@ -9,7 +9,7 @@
         <div class="flex-1" slot-scope="{ images, active, zoomed, toggleZoom, change }">
             <div class="sticky top-5 bg-white">
                 @include('rapidez::product.partials.gallery.slider')
-                @includeWhen(count($product->images) > 1, 'rapidez::product.partials.gallery.thumbnails')
+                @include('rapidez::product.partials.gallery.thumbnails')
             </div>
 
             @include('rapidez::product.partials.gallery.popup')

From 6305e635266a0f7bec3782a38021b96e3f2c09cf Mon Sep 17 00:00:00 2001
From: Jade Geels <jade@justbetter.nl>
Date: Thu, 23 Jan 2025 11:05:22 +0100
Subject: [PATCH 09/13] Update
 resources/views/product/partials/gallery/popup.blade.php

Co-authored-by: Roy Duineveld <royduineveld@gmail.com>
---
 resources/views/product/partials/gallery/popup.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/product/partials/gallery/popup.blade.php b/resources/views/product/partials/gallery/popup.blade.php
index dc2acbbab..1959bbaec 100644
--- a/resources/views/product/partials/gallery/popup.blade.php
+++ b/resources/views/product/partials/gallery/popup.blade.php
@@ -1,4 +1,4 @@
-<div v-cloak v-if="images.length && zoomed" class="fixed inset-0 bg-white cursor-zoom-out flex z-popup">
+<div v-if="images.length && zoomed" class="fixed inset-0 bg-white cursor-zoom-out flex z-popup" v-cloak>
     <div class="flex flex-1 items-center justify-center" v-on:click.prevent="toggleZoom">
         <img
             :src="config.media_url + '/catalog/product' + images[active]"

From d4f090bab3bc75dab5b417acbaa4370dea42b9db Mon Sep 17 00:00:00 2001
From: Jade Geels <jade@justbetter.nl>
Date: Fri, 24 Jan 2025 12:54:19 +0100
Subject: [PATCH 10/13] Replace first v-cloak duo

---
 .../product/partials/gallery/thumbnails.blade.php      | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/resources/views/product/partials/gallery/thumbnails.blade.php b/resources/views/product/partials/gallery/thumbnails.blade.php
index 214705112..3890777c6 100644
--- a/resources/views/product/partials/gallery/thumbnails.blade.php
+++ b/resources/views/product/partials/gallery/thumbnails.blade.php
@@ -1,7 +1,7 @@
 {{--
     In this component we avoid layout shifts on the page by pre-populating the possible amount of thumbnail slots.
-    On page load all of the images come from PHP, using `@unless (...) v-cloak @endunless` to hide things that
-    shouldn't be shown, but need a placeholder element.
+    On page load all of the images come from PHP, using `v-cloak` to hide things that shouldn't be shown, but need
+    a placeholder element.
     After Vue gets loaded in, it will take over and replace the `v-cloak`s with the `v-if`s, which means that
     the two conditionals should be identical to avoid layout shifts.
 
@@ -13,8 +13,10 @@
 <div class="mt-3 flex gap-2">
     @for ($imageId = 0; $imageId < max($breakpoints); $imageId++)
         <button
-            @unless ($imageId < count($product->images)) v-cloak @endunless
-            v-if="{{ $imageId }} < images.length"
+            @attributes([
+                'v-cloak' => !($imageId < count($product->images)),
+                'v-if' => $imageId . ' < images.length',
+            ])
             @class([
                 'max-w-24 relative flex aspect-square flex-1 items-center justify-center overflow-hidden rounded border bg-white p-1.5 outline-primary transition-all',
                 'outline outline-1 border-primary' => $imageId == 0,

From 4c97ebb3329086147c0d3f2bf50cea771d0ad6d8 Mon Sep 17 00:00:00 2001
From: Jade Geels <jade@justbetter.nl>
Date: Fri, 24 Jan 2025 12:55:37 +0100
Subject: [PATCH 11/13] Replace 2nd v-cloak

---
 .../partials/gallery/thumbnails/show-more.blade.php       | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/resources/views/product/partials/gallery/thumbnails/show-more.blade.php b/resources/views/product/partials/gallery/thumbnails/show-more.blade.php
index d231a84e6..d12ce95c5 100644
--- a/resources/views/product/partials/gallery/thumbnails/show-more.blade.php
+++ b/resources/views/product/partials/gallery/thumbnails/show-more.blade.php
@@ -1,9 +1,9 @@
 {{-- This component shows an overlay on the last shown thumbnail if there are more thumbnails after it. --}}
 
-<div
-    @unless (count($product->images) - $imageId - 1) v-cloak @endunless
-    v-if="images.length - {{ $imageId }} - 1"
->
+<div @attributes([
+    'v-cloak' => !(count($product->images) - $imageId - 1),
+    'v-if' => 'images.length - ' . $imageId . ' - 1',
+])>
     <span
         @class([
             'absolute inset-0 hidden items-center justify-center bg-black/20',

From 513abef8e75c04c8a1621165597f9dcce0c90345 Mon Sep 17 00:00:00 2001
From: Jade Geels <jade@justbetter.nl>
Date: Wed, 29 Jan 2025 14:42:03 +0100
Subject: [PATCH 12/13] Don't show thumbnails when only one image is available

---
 resources/views/product/partials/gallery/thumbnails.blade.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/views/product/partials/gallery/thumbnails.blade.php b/resources/views/product/partials/gallery/thumbnails.blade.php
index 3890777c6..3863508e7 100644
--- a/resources/views/product/partials/gallery/thumbnails.blade.php
+++ b/resources/views/product/partials/gallery/thumbnails.blade.php
@@ -14,8 +14,8 @@
     @for ($imageId = 0; $imageId < max($breakpoints); $imageId++)
         <button
             @attributes([
-                'v-cloak' => !($imageId < count($product->images)),
-                'v-if' => $imageId . ' < images.length',
+                'v-cloak' => !($imageId < count($product->images) && count($product->images) > 1),
+                'v-if' => $imageId . ' < images.length && images.length > 1',
             ])
             @class([
                 'max-w-24 relative flex aspect-square flex-1 items-center justify-center overflow-hidden rounded border bg-white p-1.5 outline-primary transition-all',

From 9972677258388d1249e7a94f94195550bef7200e Mon Sep 17 00:00:00 2001
From: Roy Duineveld <royduineveld@gmail.com>
Date: Wed, 29 Jan 2025 16:28:39 +0100
Subject: [PATCH 13/13] Apply suggestions from code review

---
 .../views/product/partials/gallery/slider.blade.php  |  6 +++---
 .../product/partials/gallery/thumbnails.blade.php    | 12 ++++--------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/resources/views/product/partials/gallery/slider.blade.php b/resources/views/product/partials/gallery/slider.blade.php
index 82835de99..62b7003b9 100644
--- a/resources/views/product/partials/gallery/slider.blade.php
+++ b/resources/views/product/partials/gallery/slider.blade.php
@@ -16,13 +16,13 @@ class="max-h-full object-contain"
     </a>
 
     @if (count($product->images ?? []) > 1)
-        <button class="z-10 top-1/2 left-3 -translate-y-1/2 absolute" v-cloak v-if="active" v-on:click="change(active-1)" aria-label="@lang('Prev')">
+        <button v-if="active" v-on:click="change(active-1)" class="z-10 top-1/2 left-3 -translate-y-1/2 absolute" aria-label="@lang('Prev')" v-cloak>
             <x-heroicon-o-chevron-left class="size-8 text-inactive" />
         </button>
-        <button class="z-10 top-1/2 right-3 -translate-y-1/2 absolute" v-if="active != images.length-1" v-on:click="change(active+1)" aria-label="@lang('Next')">
+        <button v-if="active != images.length-1" v-on:click="change(active+1)" class="z-10 top-1/2 right-3 -translate-y-1/2 absolute" aria-label="@lang('Next')">
             <x-heroicon-o-chevron-right class="size-8 text-inactive" />
         </button>
     @endif
 </div>
 
-<x-rapidez::no-image v-else v-cloak class="h-96 rounded" />
+<x-rapidez::no-image v-else class="h-96 rounded" v-cloak />
diff --git a/resources/views/product/partials/gallery/thumbnails.blade.php b/resources/views/product/partials/gallery/thumbnails.blade.php
index 3863508e7..dc3197966 100644
--- a/resources/views/product/partials/gallery/thumbnails.blade.php
+++ b/resources/views/product/partials/gallery/thumbnails.blade.php
@@ -1,11 +1,7 @@
 {{--
-    In this component we avoid layout shifts on the page by pre-populating the possible amount of thumbnail slots.
-    On page load all of the images come from PHP, using `v-cloak` to hide things that shouldn't be shown, but need
-    a placeholder element.
-    After Vue gets loaded in, it will take over and replace the `v-cloak`s with the `v-if`s, which means that
-    the two conditionals should be identical to avoid layout shifts.
-
-    The `$breakpoints` variable determines how many images are shown on each individual breakpoint.
+This components initializes with data from PHP to avoid layout shifts.
+When Vue is loaded it takes over and all `v-cloak`'s show up.
+With `$breakpoints` you can control the amount of images.
 --}}
 
 @php($breakpoints = ['xl' => 7, 'lg' => 5, 'md' => 7, 'sm' => 5, 'xs' => 3])
@@ -33,7 +29,7 @@
             v-on:click="change({{ $imageId }})"
         >
             <img
-                {{-- Note: always put the base `src` before a `v-bind:src` or it will not work --}}
+                {{-- src should always be above v-bind:src --}}
                 @if ($imageId < count($product->images))
                     src="/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product/{{ $product->images[$imageId] }}.webp"
                 @endif