- Added Webkit and IOS specific optimizations to the CSS properties (#292)

- Added  a performance improvement for the homepage to only load in tiles when the user scrolls to the bottom, instead of loading it in batches which looped forever each 150 ms
- Changed the animation type and dynamic durations of the side bar to feel more snappy and consistent

Author: 0DarkPhoenix

src/App.vue

@@ -24,11 +24,20 @@ const cssVars = computed(() => ({
   '--loading-background-color': colorPalette.value.loading_background,
 }));
 
-// Apply CSS variables to the document root
+// Apply CSS variables to the document root - batch updates to avoid thrashing
+let pendingCssUpdate = false;
 watchEffect(() => {
-  const root = document.documentElement;
-  Object.entries(cssVars.value).forEach(([key, value]) => {
-    root.style.setProperty(key, value);
+  if (pendingCssUpdate) {
+    return;
+  }
+
+  pendingCssUpdate = true;
+  requestAnimationFrame(() => {
+    const root = document.documentElement;
+    Object.entries(cssVars.value).forEach(([key, value]) => {
+      root.style.setProperty(key, value);
+    });
+    pendingCssUpdate = false;
   });
 });
 
@@ -45,7 +54,7 @@ syncRef(
     <NGlobalStyle />
     <NMessageProvider placement="bottom">
       <NNotificationProvider placement="bottom-right">
-        <div>
+        <div class="app-root">
           <component :is="layout">
             <RouterView />
           </component>
@@ -56,22 +65,33 @@ syncRef(
 </template>
 
 <style>
-body {
-  min-height: 100%;
+html {
+  height: 100%;
   margin: 0;
   padding: 0;
+  backface-visibility: hidden;
+  -webkit-font-smoothing: antialiased;
+  -webkit-backface-visibility: hidden;
 }
 
-html {
-  height: 100%;
+body {
+  min-height: 100%;
   margin: 0;
   padding: 0;
+  -webkit-overflow-scrolling: touch;
 }
 
 * {
   box-sizing: border-box;
 }
 
+.app-root {
+  contain: layout style paint;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-overflow-scrolling: touch;
+}
+
 body .vld-container {
   position: absolute;
   left: 0;
@@ -81,6 +101,11 @@ body .vld-container {
   background-color: var(--loading-background-color);
   z-index: 9999;
   text-align: center;
+  pointer-events: none;
+}
+
+body .vld-container.vl-active {
+  pointer-events: auto;
 }
 
 body .vld-container .vl-overlay.vl-active {

src/components/CollapsibleToolMenu.vue

@@ -10,8 +10,9 @@ const props = withDefaults(defineProps<{ toolsByCategory?: ToolCategory[] }>(),
 const { toolsByCategory } = toRefs(props);
 const route = useRoute();
 
-const makeLabel = (tool: Tool) => () => h(MenuItemWithTooltip, { tool });
-const makeIcon = (tool: Tool) => () => h(MenuIconItem, { tool });
+// Memoize component creation functions
+const makeLabel = (tool: Tool) => () => h(MenuItemWithTooltip, { tool, key: tool.path });
+const makeIcon = (tool: Tool) => () => h(MenuIconItem, { tool, key: tool.path });
 
 const collapsedCategories = useStorage<Record<string, boolean>>(
   'menu-tool-option:collapsed-categories',
@@ -28,18 +29,25 @@ const collapsedCategories = useStorage<Record<string, boolean>>(
 
 // Initialize default values for all categories
 watchEffect(() => {
+  const updates: Record<string, boolean> = {};
+  let hasChanges = false;
+
   toolsByCategory.value.forEach(({ name }) => {
     if (!(name in collapsedCategories.value)) {
-      collapsedCategories.value[name] = true;
+      updates[name] = true;
+      hasChanges = true;
     }
   });
+
+  if (hasChanges) {
+    Object.assign(collapsedCategories.value, updates);
+  }
 });
 
 const isToggling = ref(false);
 
 function toggleCategoryCollapse({ name }: { name: string }) {
-  const currentState = collapsedCategories.value[name];
-  collapsedCategories.value[name] = !currentState;
+  collapsedCategories.value[name] = !collapsedCategories.value[name];
 }
 
 const areAllCollapsed = computed(() => {
@@ -70,13 +78,10 @@ async function toggleAllCategories() {
 
 // Function to calculate animation duration based on number of items
 function getAnimationDuration(itemCount: number): number {
-  const baseDuration = 325;
-  const baseItemCount = 10;
+  const baseDuration = 250;
   const durationIncrement = 5;
 
-  const additionalDuration = (itemCount - baseItemCount) * durationIncrement;
-
-  return Math.max(baseDuration + additionalDuration, baseDuration);
+  return baseDuration + (Math.min(itemCount, 30) * durationIncrement);
 }
 
 const menuOptions = computed(() =>
@@ -113,7 +118,7 @@ const themeVars = useThemeVars();
       flex cursor-pointer items-center op-60
       @click="toggleCategoryCollapse({ name })"
     >
-      <span :class="{ 'rotate-0': isCollapsed, 'rotate-90': !isCollapsed }" text-16px lh-1 op-50 transition-transform>
+      <span :class="{ 'rotate-0': isCollapsed, 'rotate-90': !isCollapsed }" text-16px lh-1 op-50 transition-transform duration-200>
         <icon-mdi-chevron-right />
       </span>
 
@@ -160,10 +165,11 @@ const themeVars = useThemeVars();
   }
 }
 .category-container {
-  .menu-container {
-    display: grid;
-    grid-template-rows: 1fr;
-    transition: grid-template-rows var(--animation-duration, 350ms) ease-in-out;
+.menu-container {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows var(--animation-duration, 250ms) ease-out;
+  will-change: grid-template-rows;
 
     &.collapsed {
       grid-template-rows: 0fr;

src/pages/Home.page.vue

@@ -85,57 +85,55 @@ function stopOrderingFavorites() {
 
 // Batch loading logic for tool cards
 const TOOLS_PER_ROW = 4; // Based on xl:grid-cols-4
-const ROWS_PER_BATCH = 8;
+const ROWS_PER_BATCH = 6;
 const TOOLS_PER_BATCH = TOOLS_PER_ROW * ROWS_PER_BATCH; // 32 tools per batch
 
 const visibleToolsCount = ref(TOOLS_PER_BATCH); // Start with first batch
-let loadingInterval: NodeJS.Timeout | null = null;
+let loadingObserver: IntersectionObserver | null = null;
 
 // Computed property for visible tools
 const visibleTools = computed(() => {
   return toolStore.tools.slice(0, visibleToolsCount.value);
 });
 
-// Function to stop automated loading
-function stopAutomatedLoading() {
-  if (loadingInterval) {
-    clearInterval(loadingInterval);
-    loadingInterval = null;
+// Function to load next batch
+function loadNextBatch() {
+  if (visibleToolsCount.value < toolStore.tools.length) {
+    visibleToolsCount.value = Math.min(
+      visibleToolsCount.value + TOOLS_PER_BATCH,
+      toolStore.tools.length,
+    );
   }
 }
 
-// Function to start automated loading
-function startAutomatedLoading() {
-  // Clear any existing interval
-  if (loadingInterval) {
-    clearInterval(loadingInterval);
-  }
-
-  // Start loading batches every 150ms
-  loadingInterval = setInterval(() => {
-    if (visibleToolsCount.value < toolStore.tools.length) {
-      visibleToolsCount.value = Math.min(
-        visibleToolsCount.value + TOOLS_PER_BATCH,
-        toolStore.tools.length,
-      );
-    }
-    else {
-      // Stop loading when all tools are visible
-      stopAutomatedLoading();
-    }
-  }, 150);
-}
-
-// Start automated loading on component mount
+// Start intersection observer on component mount
 onMounted(() => {
   nextTick(() => {
-    startAutomatedLoading();
+    // Load first batch immediately
+    loadNextBatch();
+
+    // Setup intersection observer for lazy loading
+    const loadingIndicator = document.querySelector('[data-loading-indicator]');
+    if (loadingIndicator) {
+      loadingObserver = new IntersectionObserver(
+        (entries) => {
+          if (entries[0]?.isIntersecting && visibleToolsCount.value < toolStore.tools.length) {
+            loadNextBatch();
+          }
+        },
+        { rootMargin: '200px' },
+      );
+      loadingObserver.observe(loadingIndicator);
+    }
   });
 });
 
 // Clean up on component unmount
 onUnmounted(() => {
-  stopAutomatedLoading();
+  if (loadingObserver) {
+    loadingObserver.disconnect();
+    loadingObserver = null;
+  }
 });
 </script>
 
@@ -201,7 +199,7 @@ onUnmounted(() => {
       </div>
 
       <!-- Loading indicator when more tools are coming -->
-      <div v-if="visibleToolsCount < toolStore.tools.length" mt-6 text-center>
+      <div v-if="visibleToolsCount < toolStore.tools.length" data-loading-indicator mt-6 text-center>
         <div text-14px op-70>
           {{ t('home.loading-more-tools') }} <span>({{ visibleTools.length }}/{{ toolStore.tools.length }})</span>
         </div>