diff --git a/src/components/Albums/component.tsx b/src/components/Albums/component.tsx index 84c736fe..67422e63 100644 --- a/src/components/Albums/component.tsx +++ b/src/components/Albums/component.tsx @@ -1,6 +1,6 @@ import { ActivityIndicator, RefreshControl } from 'react-native' import { Separator, useTheme, XStack, YStack } from 'tamagui' -import React, { RefObject, useEffect, useRef } from 'react' +import React, { RefObject, useCallback, useEffect, useRef } from 'react' import { Text } from '../Global/helpers/text' import { FlashList, FlashListRef } from '@shopify/flash-list' import { UseInfiniteQueryResult } from '@tanstack/react-query' @@ -45,6 +45,14 @@ export default function Albums({ (letter) => (pendingLetterRef.current = letter.toUpperCase()), ) + const ItemSeparatorComponent = useCallback( + ({ leadingItem, trailingItem }: { leadingItem: unknown; trailingItem: unknown }) => + typeof leadingItem === 'string' || typeof trailingItem === 'string' ? null : ( + + ), + [], + ) + // Effect for handling the pending alphabet selector letter useEffect(() => { if (isString(pendingLetterRef.current) && albumsInfiniteQuery.data) { @@ -115,7 +123,7 @@ export default function Albums({ ListFooterComponent={ albumsInfiniteQuery.isFetchingNextPage ? : null } - ItemSeparatorComponent={() => } + ItemSeparatorComponent={ItemSeparatorComponent} refreshControl={ indices.indexOf(value) === index) }, [showAlphabeticalSelector, artists]) + const ItemSeparatorComponent = useCallback( + ({ leadingItem, trailingItem }: { leadingItem: unknown; trailingItem: unknown }) => + typeof leadingItem === 'string' || typeof trailingItem === 'string' ? null : ( + + ), + [], + ) + // Effect for handling the pending alphabet selector letter useEffect(() => { if (isString(pendingLetterRef.current) && artists) { @@ -107,7 +115,7 @@ export default function Artists({ ? item.toString() : item.Id! } - ItemSeparatorComponent={() => } + ItemSeparatorComponent={ItemSeparatorComponent} ListEmptyComponent={ diff --git a/src/components/Library/tab-bar.tsx b/src/components/Library/tab-bar.tsx index 40f5a6f3..d523c2fe 100644 --- a/src/components/Library/tab-bar.tsx +++ b/src/components/Library/tab-bar.tsx @@ -26,18 +26,12 @@ function LibraryTabBar(props: MaterialTopTabBarProps) { {[''].includes(props.state.routes[props.state.index].name) ? null : ( {props.state.routes[props.state.index].name === 'Playlists' ? ( + typeof leadingItem === 'string' || typeof trailingItem === 'string' ? null : ( + + ), + [], + ) + // Effect for handling the pending alphabet selector letter useEffect(() => { if (isString(pendingLetterRef.current) && tracksInfiniteQuery.data) { @@ -136,7 +144,7 @@ export default function Tracks({ } + ItemSeparatorComponent={ItemSeparatorComponent} numColumns={1} data={tracksInfiniteQuery.data} keyExtractor={keyExtractor}