SwiftUI + iOS 14 + Xcode 12

SwiftUI | Use Redacted Modifier

Let’s create a loading animation using the SwiftUI redacted modifier from iOS 14.

From the author

Difficulty: Beginner | Easy | Normal | Challenging

Environment : Xcode 12 & SwiftUI

Introduction

In this tutorial, we will simulate a network call, create a list of 10 items and hide the Text using the redacted modifier while it is loading. Let’s get started!

Start a new Xcode project

Create a new Xcode project > App Template > SwiftUI interface and lifecycle > Call it RedactedAnimation

Create a List

Go to your ContentView.swift file and create a SwiftUI List from the Text:

Then, replace the current code with the following:

Simulate the network call and Add Redacted Modifier

First, add the following State variable at the top:

Then, add the following function after the List last paragraph:

https://gist.github.com/Sullivan677/ed20fb85fd2fe8d8737452aa5f4c1ef4

Now, add the onAppear and Redacted modifier right after the last graph of the List:

Run the project

Click on run (top right) on Xcode, wait 2 seconds and you will see the text appear after it is shadowed.

Thanks for reading! I’m always happy to have a chat and collaborate at hello@sullivandecarli.com. Consider subscribing to enjoy unlimited access to my articles and all of Medium through my referral link.