Member-only story
Create Custom Cell With Placeholder UI Using UIHostingConfiguration
It is easier than you think
Prior to iOS 16, having a collection view or table view that will display placeholder cells while waiting for data to load is somewhat troublesome to implement. We will have to define 2 separate custom cells (the placeholder cell and the actual cell) and manually handle the UI logic based on the app’s loading state.
With the introduction of UIHostingConfiguration in iOS 16, things have become much easier. Creating 2 separate custom cells is no longer required, and the implementation has become a lot more straightforward thanks to one of the view modifiers in SwiftUI.
Interested to find out more? Read on!
The Sample App
Following is the sample app we are going to create in this article. It is an app that displays a list of inspiring programming quotes:
As you can see, the app will fill up the collection view with placeholder cells while waiting for the loading to complete.
As mentioned earlier, achieving such behavior no longer required 2 separate custom cells. We can now leverage the redacted(reason:) modifier in SwiftUI to help us in generating the custom cell’s placeholder UI.
Let me show you how.
Using the “redacted(reason:)” Modifier
The redacted(reason:) modifier is a SwiftUI view modifier that let us apply a redaction to a view based on the given reason. For example, if we apply the redaction to a Text view, we will get the following output:
Notice that the redaction effect is generated based on the view’s content. If the Text view shows an empty string, no redaction effect will be visible.
On top of that, applying redaction to a parent view will affect the entire view hierarchy. This means that if we use the…
