Redacting a container view while loading data can be an efficient way of quickly generating a skeleton view. Opting out of redaction using the unredacted modifier Since the reason parameter comes as an option set, we can return an empty array to disable the redacted modifier. We use a conditional check based on whether we have an article to enable the placeholder redacted reason. Therefore, you can decide to add the redacted view modifier to the container VStack element instead: Though, in this example, it’s likely that both title and author will load simultaneously. Note that this has the benefit of showing an unredacted author text while the title is still loading. redacted(reason: article?.author = nil ?. redacted(reason: article?.title = nil ?. When I started writing my first redacted view, I applied the redacted view modifier on each text element individually: In theory, you could redact a complete view with lists, text, and images by just applying the redacted view modifier on the outer container view. The above example code already demonstrated that you could use the redacted view modifier on multiple views at once. Using the redacted view modifier on container views The user can already get used to the structure of the final state while the data is loading, resulting in a smoother user experience. The skeleton view creates the same structure as the view will have once loading completes. The redacted view modifier in SwiftUI results in a smoother loading experience. Using the above technique results in a smoother loading experience: I’ve generated multiple previews following the approach from my article SwiftUI Previews: Validating views in different states. The redacted view modifier is enabled on the first SwiftUI view, compared to an unredacted view at the bottom. placeholder reason if the article is not yet loaded. We make sure to set a placeholder copy when the title or author is nil, and we enable the redacted view modifier using the. Text(article?.author ? "placeholder-copy-author") Text(article?.title ? "placeholder-copy-title") We can create this behavior by making use of the redacted view modifier: The user experience would be better if we had the final view structure while the data loads. While this works fine, the user experience is less fluent as the view kind of ‘jumps’ into its final loaded state:Ī spinner shows while the article is loading, resulting in a jumping user experience. The article view itself would be hidden during loading and show up once data arrives. There’s no title and author content when the article is loading, resulting in an empty view.Ī common approach would be to show a spinner while the article is loading. I’ve written a few useful extensions to solve this, which I’ll share along the way in this article while explaining how you can use the redacted view modifier in SwiftUI. I was always looking for ways to make it easier to set placeholder copy or to disable the redacting modifier once loading completes. I’ve often been using the redacted view modifier while developing apps in SwiftUI but never felt fulfilled. The user experience is smoother and gives the feeling of faster loading. Using a skeleton view instead of a spinner lets the user get a sense of how our views will look once the data is loaded. The redacted view modifier in SwiftUI allows us to create a so-called skeleton view while our data is loading. 6 min read How to use the Redacted View Modifier in SwiftUI with useful extensions.Creating a String extension to create placeholder copy.Opting out of redaction using the unredacted modifier.Using the redacted view modifier on container views.Using the Redacted View Modifier in SwiftUI.
0 Comments
Leave a Reply. |