+ { loading &&
}
+ { ! loading &&
+ ( () => {
+ const filteredCollections =
+ collectionsArr.filter( ( c ) => {
+ // During search, show all collections (even if empty)
+ // Otherwise, only show collections with icons or loading
+ if (
+ debouncedSearchInput.trim()
+ ) {
+ return true;
+ }
+ return (
+ c.icons?.length > 0 ||
+ c.loading
+ );
+ } );
+
+ // Check if any collection has icons
+ const hasAnyIcons =
+ filteredCollections.some(
+ ( c ) => c.icons?.length > 0
+ );
+
+ // Show global "no results" message if searching and no icons found
+ if (
+ debouncedSearchInput.trim() &&
+ ! hasAnyIcons
+ ) {
+ return (
+
+
+ { __(
+ 'No icons found matching your search.',
+ 'blockparty-icons'
+ ) }
+
+
+ );
+ }
+
+ return (
+
( {
+ name: c.name,
+ title: capitalize(
+ c.name
+ ),
+ } )
+ ) }
+ >
+ { ( tab ) =>
+ filteredCollections.map(
+ ( c ) =>
+ tab.name ===
+ c.name && (
+
+ { !! c.icons
+ ?.length && (
+
+
+ { c.loading && (
+
+
+
+ ) }
+ { !! c
+ .icons
+ ?.length &&
+ ! c.loading && (
+
+
+ { c.icons.map(
+ (
+ i
+ ) => (
+ -
+
+
+
+
+ )
+ ) }
+
+
+
+ { __(
+ 'No Icon found in this collection.',
+ 'blockparty-icons'
+ ) }
+
+
+ ) }
+
+ )
+ )
+ }
+
+ );
+ } )() }
+