add loading overlay to playqueue on fetching

src/renderer/features/now-playing/components/play-queue.tsx

@@ -5,8 +5,10 @@ import { forwardRef, useEffect, useMemo, useRef } from 'react';
 
 import { ItemTableList } from '/@/renderer/components/item-list/item-table-list/item-table-list';
 import { ItemTableListColumn } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { useIsPlayerFetching } from '/@/renderer/features/player/context/player-context';
 import { useListSettings, usePlayerQueue } from '/@/renderer/store';
 import { searchSongs } from '/@/renderer/utils/search-songs';
+import { LoadingOverlay } from '/@/shared/components/loading-overlay/loading-overlay';
 import { LibraryItem, QueueSong } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';
 
@@ -19,6 +21,7 @@ export const PlayQueue = forwardRef(({ listKey, searchTerm }: QueueProps, ref: R
     const { table } = useListSettings(listKey);
 
     const queue = usePlayerQueue();
+    const isFetching = useIsPlayerFetching();
 
     const data: QueueSong[] = useMemo(() => {
         if (searchTerm) {
@@ -58,26 +61,29 @@ export const PlayQueue = forwardRef(({ listKey, searchTerm }: QueueProps, ref: R
     }, [data.length, playQueueKeyRef]);
 
     return (
-        <ItemTableList
+        <>
-            CellComponent={ItemTableListColumn}
+            <LoadingOverlay visible={isFetching} />
-            columns={table.columns}
+            <ItemTableList
-            data={data || []}
+                CellComponent={ItemTableListColumn}
-            enableAlternateRowColors={table.enableAlternateRowColors}
+                columns={table.columns}
-            enableDrag={true}
+                data={data || []}
-            enableExpansion={false}
+                enableAlternateRowColors={table.enableAlternateRowColors}
-            enableHeader={true}
+                enableDrag={true}
-            enableHorizontalBorders={table.enableHorizontalBorders}
+                enableExpansion={false}
-            enableRowHoverHighlight={table.enableRowHoverHighlight}
+                enableHeader={true}
-            enableSelection={true}
+                enableHorizontalBorders={table.enableHorizontalBorders}
-            enableVerticalBorders={table.enableVerticalBorders}
+                enableRowHoverHighlight={table.enableRowHoverHighlight}
-            initialTop={{
+                enableSelection={true}
-                to: 0,
+                enableVerticalBorders={table.enableVerticalBorders}
-                type: 'offset',
+                initialTop={{
-            }}
+                    to: 0,
-            itemType={LibraryItem.QUEUE_SONG}
+                    type: 'offset',
-            key={playQueueKeyRef.current.key}
+                }}
-            ref={ref}
+                itemType={LibraryItem.QUEUE_SONG}
-            size={table.size}
+                key={playQueueKeyRef.current.key}
-        />
+                ref={ref}
+                size={table.size}
+            />
+        </>
     );
 });

src/renderer/features/now-playing/components/sidebar-play-queue.tsx

@@ -7,11 +7,10 @@ import { ItemListKey } from '/@/shared/types/types';
 
 export const SidebarPlayQueue = () => {
     const tableRef = useRef<null>(null);
-    // const queueRef = useRef<null | { grid: AgGridReactType<Song> }>(null);
     const [search, setSearch] = useState<string | undefined>(undefined);
 
     return (
-        <Flex direction="column" h="100%">
+        <Flex direction="column" h="100%" w="100%">
             <PlayQueueListControls
                 handleSearch={setSearch}
                 searchTerm={search}