Store creation M2 - domain selection: empty/error/loading states, design updates

[jaclync]

Parts of #8045

Description

After the previous basic UI integration, this PR updated the design and handled different states of the domain suggestions.

Design updates include:

• Updated the large title from a label in the view to the large title style for the navigation bar, so that it doesn't take up much vertical space on landscape and shrinks when scrolling up
• Landscape layout:
  • Previously, List was used for the domain results but it had its own scrolling behavior and it was hard to fit the height to its content. This PR changed it to show the domain suggestions in a LazyVStack (there are always max 20 results without infinite scroll) contained in a ScrollView. This way, the user can always scroll to the bottom of the domain list
• Search text field (SearchHeader component): it's currently used in ProductSelectorand FilterListSelector, I tested these two use cases to make sure there are no visual changes. I added a Customizations struct that can be passed to the initializer, with the styles in current use cases as default
• DomainRowView: added padding to the row

States of domain suggestions:

• Empty query: whenever the query is empty (including empty spaces), a placeholder image is shown - please note that the image asset needs some updates to support dark mode HyVloP5FipZzyPVenH2euI-fi-2453%3A99694 as a separate subtask
• Error: an error message is shown. If it's a DotcomError.unknown error, the message string is shown (should be localized)
• Loading: a ProgressView spinner is shown
• Results: the domain suggestions are shown

I updated the SwiftUI previews to include previews for these 4 states for faster design updates during development. Please feel free to suggest anything, I haven't worked on SwiftUI extensively for a while.

Testing instructions

• Log in if needed
• Go to the Menu tab, and tap Switch store
• On the store picker, tap + Add a store
• Tap Create a new store --> the domain selector should be shown with a placeholder image
• Enter some valid query for domain suggestions --> a spinner should be shown while loading. after a bit, some results should be shown
• Select a domain --> a checkmark should be shown on the row with bold text, and Continue CTA should be shown at the bottom
• Enter some invalid query (e.g. !!!!) --> the Continue CTA should be hidden, and a spinner should be shown while loading. after a bit, an error message should be shown like Domain searches only support the following characters...
• Feel free to test the above steps in landscape mode

Screenshots

Please feel free to suggest any other improvements.

empty query	loading	error	results

---

• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

[wpmobilebot]

You can test the changes from this Pull Request by:

• Clicking here or scanning the QR code below to access App Center
• Then installing the build number pr8092-42d811f on your iPhone

If you need access to App Center, please ask a maintainer to add you.

[annchichi]

Great work @jaclync! That's super fast.

• It'd be odd when the graph feels half-cut. I wonder if we can have the keyboard up with the blinking typing indicator in the search bar on when the query is empty?
• There were some spacing issues, so I noted this with this screenshot.
• The suggestion can be smaller with SF pro text 13 regular.

Thank you!

[jaclync]

Thanks @annchichi for the feedback! I'm leaving these improvements for a separate PR later, since this PR is already in review. I added them as subtasks in the issue description #8045.

[itsmeichigo]

Overall this works great, and the code looks good to me. I have a few non-blocking comments:

Here it seems to me that the padding around the search icon is a bit large, while there seems to be missing some padding on the right of the text field. This may look out of place for devices with small screen sizes.

Also, we probably want to dismiss the keyboard after selecting any item and when the list is being dragged. That will help avoid situations when the list is not scrollable due to the keyboard taking up all of the space:

[itsmeichigo]

We can simply decide visibility of the placeholder image based on searchTerm. That way we won't need to update the image in the view model. We can also avoid the else-if blocks by using renderredIf - the results LazyVStack will not be rendered if the domain list is empty so there's no need to put it in the else block I believe.

// Placeholder image when search query is empty.
HStack {
    Spacer()
    Image(uiImage: UIImage.domainSearchPlaceholderImage)
    Spacer()
}
.renderedIf(viewModel.searchTerm.isEmpty)

HStack {
    Spacer()
    ProgressView()
    Spacer()
}
.renderedIf(viewModel.isLoadingDomainSuggestions)

if let errorMessage = viewModel.errorMessage {
    // Error message when there is an error loading domain suggestions.
    Text(errorMessage)
        .padding(Layout.defaultPadding)
}

LazyVStack {
    ForEach(viewModel.domains, id: \.self) { domain in
        Button {
            selectedDomainName = domain
        } label: {
            VStack(alignment: .leading) {
                DomainRowView(viewModel: .init(domainName: domain,
                                                searchQuery: viewModel.searchTerm,
                                                isSelected: domain == selectedDomainName))
                Divider()
                    .frame(height: Layout.dividerHeight)
                    .padding(.leading, Layout.defaultHorizontalPadding)
            }
        }
    }
}

[jaclync]

Nice suggestions, I forgot about renderedIf! The if/else style ensures that only one conditional UI is shown at a time. I tested the suggested changes, and I'll have to change the timing when errors are reset and maybe more to make sure only one UI is shown at the same time. I think I'll keep the if/else style for now, but I replaced the viewModel.placeholderImage with viewModel.searchTerm.isEmpty in 42d811f thanks to your suggestion!

[itsmeichigo]

As comment above, we should not need this to decide the visibility of the placeholder image - the searchTerm should be sufficient.

[jaclync]

Removed in 42d811f 👍

[jaclync]

Thanks for the review & testing feedback @itsmeichigo! I addressed your comments, and added your design suggestions to #8045 as future subtasks. I'll come back to the design enhancements after the main store creation flow is done. Merging the PR now.