I have a page consisting of a search box and a list. By default, the list consists of many food categories. If the user starts entering the name of the dish in the search bar, the sheet should be cleared and filled with a new list of products. I want to make the input to the search bar and the product search process itself work asynchronously, because this is a rather slow procedure. In the code below, I tried to implement an asynchronous loading mechanism, but in fact the list loads just as slowly, if not worse.
Can someone help me to sort out this issue?
var body: some View {
NavigationView{
ZStack {
ScrollView {
VStack(alignment: .leading, spacing: 0){
Divider()
TextField("Поиск по слову", text: $selectedFood)
.padding(.vertical, 10)
.onChange(of: selectedFood, perform: {selectedFood in
if !selectedFood.isEmpty {
Task {
FoodList = try await GetFoodItemsByName(_name: selectedFood)
searchByWordView = false
}
} else {
Task{
FoodList = try await FillFoodCategoryList()
searchByWordView = true
}
}
})
Divider()
ForEach(FoodList){dish in
if !searchByWordView {
DoButton(dish: dish)
Divider()
} else {
DoLink(dish: dish)
Divider()
}
}
}.padding(.leading, 20)
}
.task {
Task{
FoodList = try await FillFoodCategoryList()
}
}
.listStyle(.plain)
if !addScreen {
addSreenView(addScreen: $addScreen, gram: $gram, selectedFood: $selectedFoodTemp, foodItems: $foodItems)
}
}
.navigationTitle("Добавить блюдо")
.navigationBarTitleDisplayMode(.large)
.interactiveDismissDisabled()
}
}