Improvements in search and loading

Author: alessiorubicini

Package.swift

@@ -1,11 +1,11 @@
-// swift-tools-version:5.5
+// swift-tools-version:5.9
 // The swift-tools-version declares the minimum version of Swift required to build this package.
 
 import PackageDescription
 
 let package = Package(
     name: "SFSymbolsPicker",
-    platforms: [.iOS(.v15), .macOS(.v12)],
+    platforms: [.iOS(.v17), .macOS(.v14)],
     products: [
         // Products define the executables and libraries a package produces, and make them visible to other packages.
         .library(

Sources/SFSymbolsPicker/Examples/UsageExample.swift

@@ -0,0 +1,72 @@
+//
+//  SwiftUIView.swift
+//  
+//
+//  Created by Alessio Rubicini on 06/01/21.
+//
+
+import Foundation
+import SwiftUI
+
+struct ContentView: View {
+    @State private var isSheetPresented = false
+    @State private var icon = "star.fill"
+    @State private var iconSize: CGFloat = 50
+    
+    var body: some View {
+        NavigationStack {
+            VStack(spacing: 30) {
+                // Selected Symbol Preview
+                VStack(spacing: 16) {
+                    Image(systemName: icon)
+                        .font(.system(size: iconSize))
+                        .foregroundColor(.accentColor)
+                        .frame(width: 100, height: 100)
+                        .background(
+                            RoundedRectangle(cornerRadius: 20)
+                                .fill(Color.accentColor.opacity(0.1))
+                        )
+                    
+                    Text(icon)
+                        .font(.subheadline)
+                        .foregroundColor(.secondary)
+                }
+                .padding()
+                
+                // Open Picker Button
+                Button {
+                    isSheetPresented.toggle()
+                } label: {
+                    HStack {
+                        Image(systemName: "square.grid.2x2")
+                        Text("Choose Symbol")
+                    }
+                    .font(.headline)
+                    .foregroundColor(.white)
+                    .frame(maxWidth: .infinity)
+                    .padding()
+                    .background(Color.accentColor)
+                    .cornerRadius(15)
+                }
+                .padding(.horizontal)
+            }
+            .padding()
+            .navigationTitle("SF Symbols Picker")
+            .sheet(isPresented: $isSheetPresented) {
+                SymbolsPicker(
+                    selection: $icon,
+                    title: "Choose your symbol",
+                    searchLabel: "Search symbols...",
+                    autoDismiss: true
+                ) {
+                    Image(systemName: "xmark.circle")
+                        .foregroundColor(.accentColor)
+                }
+            }
+        }
+    }
+}
+
+#Preview {
+    ContentView()
+}

Sources/SFSymbolsPicker/SymbolIcon.swift

@@ -12,21 +12,48 @@ struct SymbolIcon: View {
     let symbolName: String
     @Binding var selection: String
 
+    private let size: CGFloat = 44
+    private let cornerRadius: CGFloat = 8
+    @State private var isPressed: Bool = false
+    
     var body: some View {
-        Image(systemName: symbolName)
-            .font(.system(size: 25))
-            .animation(.linear)
-            .foregroundColor(self.selection == symbolName ? Color.accentColor : Color.primary)
-            .onTapGesture {
-                // Assign binding value
-                withAnimation {
-                    self.selection = symbolName
-                }
+        Button {
+            withAnimation(.spring(response: 0.3, dampingFraction: 0.7)) {
+                selection = symbolName
             }
+        } label: {
+            Image(systemName: symbolName)
+                .font(.system(size: 24, weight: .regular))
+                .frame(width: size, height: size)
+                .background(
+                    RoundedRectangle(cornerRadius: cornerRadius)
+                        .fill(selection == symbolName ? 
+                            Color.accentColor.opacity(0.15) : 
+                            Color.clear)
+                )
+                .foregroundColor(selection == symbolName ? 
+                    .accentColor : 
+                    .primary)
+                .scaleEffect(isPressed ? 0.95 : 1.0)
+                .animation(.easeInOut(duration: 0.1), value: isPressed)
+        }
+        .buttonStyle(SymbolButtonStyle(isPressed: $isPressed))
+        .contentShape(Rectangle())
     }
 
 }
 
+private struct SymbolButtonStyle: ButtonStyle {
+    @Binding var isPressed: Bool
+    
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .onChange(of: configuration.isPressed) { oldValue, newValue in
+                isPressed = newValue
+            }
+    }
+}
+
 #Preview {
     SymbolIcon(symbolName: "beats.powerbeatspro", selection: .constant("star.bubble"))
 }

Sources/SFSymbolsPicker/SymbolLoader.swift

@@ -7,59 +7,114 @@
 
 import Foundation
 
+private extension String {
+    func fuzzyMatch(_ pattern: String) -> Bool {
+        let pattern = pattern.lowercased()
+        let string = self.lowercased()
+        
+        if pattern.isEmpty { return true }
+        if string.isEmpty { return false }
+        
+        var patternIndex = pattern.startIndex
+        var stringIndex = string.startIndex
+        
+        while patternIndex < pattern.endIndex && stringIndex < string.endIndex {
+            if pattern[patternIndex] == string[stringIndex] {
+                patternIndex = pattern.index(after: patternIndex)
+            }
+            stringIndex = string.index(after: stringIndex)
+        }
+        
+        return patternIndex == pattern.endIndex
+    }
+}
+
 // This class is responsible for loading symbols from system
 public class SymbolLoader {
-
     private let symbolsPerPage = 100
     private var currentPage = 0
     private final var allSymbols: [String] = []
-    
+    private var retryCount = 0  // Prevent infinite retries
+    private var loadedSymbols: [String] = []
+
     public init() {
-        self.allSymbols = getAllSymbols()
+        // Load symbols asynchronously
+        DispatchQueue.global(qos: .userInitiated).async { [weak self] in
+            self?.loadAllSymbols()
+        }
     }
 
-    // Retrieves symbols for the current page
     public func getSymbols() -> [String] {
-        currentPage += 1
+        if currentPage == 0 {
+            currentPage = 1
+            let endIndex = min(symbolsPerPage, allSymbols.count)
+            loadedSymbols = Array(allSymbols[0..<endIndex])
+        }
+        return loadedSymbols
+    }
 
-        // Calculate start and end index for the requested page
+    public func loadNextPage() -> [String] {
+        guard hasMoreSymbols() else { return [] }
+        currentPage += 1
         let startIndex = (currentPage - 1) * symbolsPerPage
         let endIndex = min(startIndex + symbolsPerPage, allSymbols.count)
-
-        // Extract symbols for the page
-        return Array(allSymbols[startIndex..<endIndex])
+        let newSymbols = Array(allSymbols[startIndex..<endIndex])
+        loadedSymbols.append(contentsOf: newSymbols)
+        return newSymbols
     }
-    
-    // Retrieves symbols that start with the specified name
+
     public func getSymbols(named name: String) -> [String] {
-        return allSymbols.filter({$0.lowercased().starts(with: name.lowercased())})
+        if name.isEmpty { return [] }
+        
+        // First try exact matches
+        let exactMatches = allSymbols.filter { $0.lowercased().starts(with: name.lowercased()) }
+        if !exactMatches.isEmpty {
+            return exactMatches
+        }
+        
+        // Then try fuzzy matches
+        return allSymbols.filter { $0.fuzzyMatch(name) }
     }
-    
-    // Checks if there are more symbols available
+
     public func hasMoreSymbols() -> Bool {
-        return currentPage * symbolsPerPage < allSymbols.count
+        let nextPageStart = currentPage * symbolsPerPage
+        return nextPageStart < allSymbols.count
     }
-    
-    // Resets the pagination to the initial state
+
     public func resetPagination() {
         currentPage = 0
+        loadedSymbols.removeAll()
     }
-    
-    // Loads all symbols from the plist file
-    private func getAllSymbols() -> [String] {
-        var allSymbols = [String]()
-        if let bundle = Bundle(identifier: "com.apple.CoreGlyphs"),
-            let resourcePath = bundle.path(forResource: "name_availability", ofType: "plist"),
-            let plist = NSDictionary(contentsOfFile: resourcePath),
-            let plistSymbols = plist["symbols"] as? [String: String]
-        {
-            // Get all symbol names
-            allSymbols = Array(plistSymbols.keys)
+
+    private func loadAllSymbols() {
+        guard let bundle = Bundle(identifier: "com.apple.CoreGlyphs") else {
+            print("Failed: Bundle 'com.apple.CoreGlyphs' not found. Retrying...")
+            if retryCount < 3 {  // Prevent infinite retries
+                retryCount += 1
+                DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
+                    self.loadAllSymbols() // Retry loading
+                }
+            }
+            return
         }
-        return allSymbols.sorted(by: {
-            $1 > $0
-        })
-    }
 
+        guard let resourcePath = bundle.path(forResource: "name_availability", ofType: "plist"),
+              let plist = NSDictionary(contentsOfFile: resourcePath),
+              let plistSymbols = plist["symbols"] as? [String: String] else {
+            return
+        }
+
+        print("Successfully loaded \(plistSymbols.count) SF Symbols.")
+        allSymbols = Array(plistSymbols.keys).sorted(by: { $1 > $0 })
+        loadedSymbols = Array(allSymbols.prefix(symbolsPerPage))
+
+        // Notify ViewModel to update UI on the main queue
+        DispatchQueue.main.async {
+            NotificationCenter.default.post(name: .symbolsLoaded, object: nil)
+        }
+    }
 }
 
+extension Notification.Name {
+    static let symbolsLoaded = Notification.Name("symbolsLoaded")
+}

Sources/SFSymbolsPicker/SymbolsPicker.swift

@@ -31,28 +31,59 @@ public struct SymbolsPicker<Content: View>: View {
 
     @ViewBuilder
     public var body: some View {
-        NavigationView {
+        NavigationStack {
             VStack {
-                ScrollView(.vertical) {
-                    LazyVGrid(columns: [GridItem(.adaptive(minimum: 70))], spacing: 20) {
-                        ForEach(vm.symbols, id: \.hash) { icon in
-                            Button {
-                                withAnimation {
-                                    self.selection = icon
+                Group {
+                    if(vm.isLoading) {
+                        ProgressView()
+                            .scaleEffect(1.2)
+                            .frame(maxWidth: .infinity, maxHeight: .infinity)
+                    } else if vm.symbols.isEmpty && !searchText.isEmpty {
+                        ContentUnavailableView {
+                            Label("No Symbols Found", systemImage: "magnifyingglass")
+                        } description: {
+                            Text("Try searching for something else")
+                        }
+                    } else {
+                        ScrollView(.vertical) {
+                            LazyVGrid(
+                                columns: [
+                                    GridItem(.adaptive(minimum: 60, maximum: 80), spacing: 16)
+                                ],
+                                spacing: 16
+                            ) {
+                                ForEach(vm.symbols, id: \.hash) { icon in
+                                    Button {
+                                        withAnimation {
+                                            self.selection = icon
+                                        }
+                                    } label: {
+                                        SymbolIcon(symbolName: icon, selection: $selection)
+                                    }
+                                }
+                                
+                                if vm.hasMoreSymbols && searchText.isEmpty {
+                                    if vm.isLoadingMore {
+                                        ProgressView()
+                                            .padding()
+                                    } else {
+                                        Color.clear
+                                            .frame(height: 1)
+                                            .onAppear {
+                                                vm.loadMoreSymbols()
+                                            }
+                                    }
                                 }
-                            } label: {
-                                SymbolIcon(symbolName: icon, selection: $selection)
                             }
-
-                        }.padding(.top, 5)
-                    }
-                    
-                    if(vm.hasMoreSymbols && searchText.isEmpty) {
-                        Button(action: {
-                            vm.loadSymbols()
-                        }, label: {
-                            Label("Load More", systemImage: "square.and.arrow.down")
-                        }).padding()
+                            .padding(.horizontal)
+                        }
+                        .scrollIndicators(.hidden)
+                        .scrollDisabled(false)
+                        .simultaneousGesture(
+                            DragGesture(minimumDistance: 10)
+                                .onChanged { _ in }
+                        )
+                        .scrollDismissesKeyboard(.immediately)
                     }
                 }
                 .navigationTitle(vm.title)
@@ -68,19 +99,17 @@ public struct SymbolsPicker<Content: View>: View {
                         }
                     }
                 }
-                .padding(.vertical, 5)
-                
-            }.padding(.horizontal, 5)
-                .searchable(text: $searchText, prompt: vm.searchbarLabel)
+            }
+            .searchable(text: $searchText, prompt: vm.searchbarLabel)
         }
 
-        .onChange(of: selection) { newValue in
+        .onChange(of: selection) { oldValue, newValue in
             if(vm.autoDismiss) {
                 presentationMode.wrappedValue.dismiss()
             }
         }
 
-        .onChange(of: searchText) { newValue in
+        .onChange(of: searchText) { oldValue, newValue in
             if(newValue.isEmpty || searchText.isEmpty) {
                 vm.reset()
             } else {