Fix slow rendering of catalog filter

app/Helpers/general.php

@@ -140,9 +140,11 @@ function utrans($str)
     return mb_ucfirst(trans($str));
 }
 
-function mb_ucfirst($str) {
-    $str = mb_strtoupper(mb_substr($str, 0, 1)) . mb_substr($str, 1);
-    return $str;
+if (!function_exists('mb_ucfirst')) {
+    function mb_ucfirst($str) {
+        $str = mb_strtoupper(mb_substr($str, 0, 1)) . mb_substr($str, 1);
+        return $str;
+    }
 }
 
 function isValidURL($url)

package.json

@@ -24,7 +24,6 @@
         "vue": "^3.2.47"
     },
     "dependencies": {
-        "@popperjs/core": "^2.11.7",
         "axios": "^1.6.0",
         "bootstrap": "^3.4.1",
         "clipboard": "^2.0.6",
@@ -34,6 +33,7 @@
         "debounce": "1.2.0",
         "flickity": "^2.2.1",
         "flickity-imagesloaded": "^2.0.0",
+        "floating-vue": "^5.2.2",
         "imagesloaded": "^4.1.4",
         "infinite-scroll": "^3.0.6",
         "isotope-layout": "^3.0.6",

resources/css/app-tailwind.css

@@ -3,6 +3,14 @@
 @import './fonts.css';
 
 @tailwind components;
+
+.v-popper__popper.v-popper--theme-dropdown .v-popper__arrow-container {
+    @apply tw-hidden;
+}
+.v-popper__popper.v-popper--theme-dropdown .v-popper__inner {
+    @apply tw-bg-transparent tw-shadow-none tw-border-0 tw-rounded-none;
+}
+
 @tailwind utilities;
 
 @layer base {

resources/js/app.js

@@ -67,6 +67,9 @@ import CopyToClipboardLink from './components/CopyToClipboardLink.vue'
 import BottomModal from './components/BottomModal.vue'
 import NewsletterSignupFormController from './components/newsletter-signup/FormController.vue'
 import NewsletterSignupBottomModalController from './components/newsletter-signup/BottomModalController.vue'
+import { Dropdown } from 'floating-vue'
+
+import 'floating-vue/dist/style.css'
 
 createApp({
     compilerOptions: {
@@ -81,7 +84,7 @@ createApp({
         },
     })
     .use(ZiggyVue)
-
+    .component('VDropdown', Dropdown)
     .component('featured-piece-click-tracker', FeaturedPieceClickTracker)
     .component('filter-sort-by', FilterSortBy)
     .component('filter-checkbox', FilterCheckbox)

resources/js/components/catalog-new/Popover.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent } from 'radix-vue'
+import { Dropdown as VDropdown } from 'floating-vue'
 
 import CaretUpIcon from './icons/CaretUp.vue'
 
@@ -13,9 +13,17 @@ const isOpen = ref(false)
 </script>
 
 <template>
-    <PopoverRoot @update:open="($open) => (isOpen = $open)">
+    <VDropdown
+        :triggers="['click']"
+        :shown="isOpen"
+        :distance="10"
+        placement="bottom-start"
+        @show="isOpen = true"
+        @hide="isOpen = false"
+        :delay="0"
+    >
         <div class="tw-border" :class="[isOpen ? 'tw-border-gray-800' : 'tw-border-transparent']">
-            <PopoverTrigger
+            <button
                 class="tw-border tw-bg-white tw-py-2.5 tw-px-4 hover:tw-border-gray-800"
                 :class="[isOpen || isActive ? 'tw-border-gray-800' : 'tw-border-gray-300']"
             >
@@ -26,29 +34,14 @@ const isOpen = ref(false)
                         :class="[isOpen ? 'tw-fill-sky-300' : 'tw-rotate-180']"
                     />
                 </div>
-            </PopoverTrigger>
+            </button>
         </div>
-
-        <PopoverPortal>
-            <!-- PopoverPortal teleports outside of .tailwind-rules scope -->
+        <template #popper>
             <div class="tailwind-rules">
-                <Transition
-                    class="tw-origin-[var(--radix-popover-content-transform-origin)]"
-                    enter-from-class="tw-opacity-0"
-                    leave-to-class="tw-opacity-0"
-                    enter-active-class="tw-transition-opacity tw-duration-100"
-                    leave-active-class="tw-transition-opacity tw-duration-100"
-                >
-                    <PopoverContent
-                        side="bottom"
-                        align="start"
-                        :side-offset="10"
-                        class="tw-hidden md:tw-block tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6 tw-mr-8 -tw-ml-px"
-                    >
-                        <slot name="content"></slot>
-                    </PopoverContent>
-                </Transition>
+                <div class="tw-hidden md:tw-block tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6 tw-mr-8">
+                    <slot name="content"></slot>
+                </div>
             </div>
-        </PopoverPortal>
-    </PopoverRoot>
+        </template>
+    </VDropdown>
 </template>