Apply suggestions from code review

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 />

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