large performance refactor

src/renderer/components/grid-carousel/grid-carousel-v2.tsx

@@ -42,7 +42,7 @@ const pageVariants: Variants = {
     initial: (custom: { isNext: boolean }) => ({ opacity: 0, x: custom.isNext ? 100 : -100 }),
 };
 
-export function GridCarousel(props: GridCarouselProps) {
+function BaseGridCarousel(props: GridCarouselProps) {
     const { cards, hasNextPage, loadNextPage, onNextPage, onPrevPage, rowCount = 1, title } = props;
     const { ref, ...cq } = useContainerQuery({
         '2xl': 1024,
@@ -192,6 +192,10 @@ export function GridCarousel(props: GridCarouselProps) {
     );
 }
 
+export const GridCarousel = memo(BaseGridCarousel);
+
+GridCarousel.displayName = 'GridCarousel';
+
 function getCardsToShow(breakpoints: {
     isLargerThan2xl: boolean;
     isLargerThan3xl: boolean;

src/renderer/components/item-list/helpers/item-list-infinite-loader.ts

@@ -50,9 +50,21 @@ function getInitialData(itemCount: number) {
     };
 }
 
+export const infiniteLoaderDataQueryKey = (
+    serverId: string,
+    itemType: LibraryItem,
+    query?: Record<string, any>,
+) => {
+    if (query) {
+        return [serverId, 'item-list-infinite-loader', itemType, query];
+    }
+
+    return [serverId, 'item-list-infinite-loader', itemType];
+};
+
 export const useItemListInfiniteLoader = ({
     eventKey,
-    fetchThreshold = 0.2,
+    fetchThreshold = 0.5,
     itemsPerPage = 100,
     itemType,
     listCountQuery,

src/renderer/components/item-list/item-grid-list/item-grid-list.tsx

@@ -266,7 +266,7 @@ export interface ItemGridListProps {
     rows?: ItemCardProps['rows'];
 }
 
-export const ItemGridList = ({
+const BaseItemGridList = ({
     data,
     enableDrag = true,
     enableExpansion = false,
@@ -750,3 +750,7 @@ const ListComponent = memo((props: ListChildComponentProps<GridItemProps>) => {
         </div>
     );
 });
+
+export const ItemGridList = memo(BaseItemGridList);
+
+ItemGridList.displayName = 'ItemGridList';

src/renderer/components/item-list/item-table-list/columns/row-index-column.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { memo } from 'react';
 
 import styles from './row-index-column.module.css';
 
@@ -88,6 +89,8 @@ const QueueSongRowIndexColumn = (props: ItemTableListInnerColumn) => {
         !!props.activeRowId &&
         (props.activeRowId === song?.id || props.activeRowId === song?._uniqueId);
 
+    const isActiveAndPlaying = isActive && status === PlayerStatus.PLAYING;
+
     let adjustedRowIndex =
         props.adjustedRowIndexMap?.get(props.rowIndex) ??
         (props.enableHeader ? props.rowIndex : props.rowIndex + 1);
@@ -97,20 +100,39 @@ const QueueSongRowIndexColumn = (props: ItemTableListInnerColumn) => {
     }
 
     return (
-        <TableColumnTextContainer {...props}>
-            {isActive ? (
-                status === PlayerStatus.PLAYING ? (
-                    <Flex>
-                        <Icon fill="primary" icon="mediaPlay" />
-                    </Flex>
-                ) : (
-                    <Flex>
-                        <Icon fill="primary" icon="mediaPause" />
-                    </Flex>
-                )
-            ) : (
-                adjustedRowIndex
-            )}
-        </TableColumnTextContainer>
+        <InnerQueueSongRowIndexColumn
+            {...props}
+            adjustedRowIndex={adjustedRowIndex}
+            isActive={isActive}
+            isPlaying={isActiveAndPlaying}
+        />
     );
 };
+
+const InnerQueueSongRowIndexColumn = memo(
+    (
+        props: ItemTableListInnerColumn & {
+            adjustedRowIndex: number;
+            isActive: boolean;
+            isPlaying: boolean;
+        },
+    ) => {
+        return (
+            <TableColumnTextContainer {...props}>
+                {props.isActive ? (
+                    props.isPlaying ? (
+                        <Flex>
+                            <Icon fill="primary" icon="mediaPlay" />
+                        </Flex>
+                    ) : (
+                        <Flex>
+                            <Icon fill="primary" icon="mediaPause" />
+                        </Flex>
+                    )
+                ) : (
+                    props.adjustedRowIndex
+                )}
+            </TableColumnTextContainer>
+        );
+    },
+);

src/renderer/components/item-list/item-table-list/item-table-list.tsx

@@ -6,6 +6,7 @@ import { AnimatePresence, motion } from 'motion/react';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
 import React, {
     type JSXElementConstructor,
+    memo,
     ReactElement,
     Ref,
     useCallback,
@@ -704,7 +705,7 @@ interface ItemTableListProps {
     startRowIndex?: number;
 }
 
-export const ItemTableList = ({
+const BaseItemTableList = ({
     activeRowId,
     autoFitColumns = false,
     CellComponent,
@@ -2178,3 +2179,7 @@ export const ItemTableList = ({
         </motion.div>
     );
 };
+
+export const ItemTableList = memo(BaseItemTableList);
+
+ItemTableList.displayName = 'ItemTableList';

src/renderer/components/native-scroll-area/native-scroll-area.tsx

@@ -1,5 +1,5 @@
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
-import { CSSProperties, forwardRef, ReactNode, Ref, useEffect, useRef } from 'react';
+import { CSSProperties, forwardRef, memo, ReactNode, Ref, useEffect, useRef } from 'react';
 
 import styles from './native-scroll-area.module.css';
 
@@ -18,7 +18,7 @@ interface NativeScrollAreaProps {
     style?: CSSProperties;
 }
 
-export const NativeScrollArea = forwardRef(
+const BaseNativeScrollArea = forwardRef(
     (
         { children, noHeader, pageHeaderProps, scrollHideDelay, ...props }: NativeScrollAreaProps,
         ref: Ref<HTMLDivElement>,
@@ -98,3 +98,7 @@ export const NativeScrollArea = forwardRef(
         );
     },
 );
+
+export const NativeScrollArea = memo(BaseNativeScrollArea);
+
+NativeScrollArea.displayName = 'NativeScrollArea';

src/renderer/components/page-header/page-header.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { useInView } from 'motion/react';
 import { AnimatePresence, motion, Variants } from 'motion/react';
-import { CSSProperties, ReactNode, RefObject, useEffect, useRef } from 'react';
+import { CSSProperties, memo, ReactNode, RefObject, useEffect, useRef } from 'react';
 
 import styles from './page-header.module.css';
 
@@ -35,7 +35,7 @@ const variants: Variants = {
     initial: { opacity: 0 },
 };
 
-export const PageHeader = ({
+const BasePageHeader = ({
     animated,
     backgroundColor,
     children,
@@ -144,3 +144,7 @@ export const PageHeader = ({
         </>
     );
 };
+
+export const PageHeader = memo(BasePageHeader);
+
+PageHeader.displayName = 'PageHeader';