Empty state handling in iOS Swift - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an empty state in mobile app UI?

An empty state is the screen or view shown when there is no data to display. It helps users understand that the app is working but has no content yet.

beginner

Why is handling empty states important in app design?

Handling empty states improves user experience by providing guidance, reducing confusion, and encouraging users to take action when no data is available.

beginner

Name two common UI elements used in empty state screens.

Common UI elements are an icon or image and a message explaining the empty state. Sometimes a button is added to help users add data or refresh.

intermediate

How can you implement an empty state in SwiftUI?

You can check if your data list is empty and show a VStack with an image and text instead of the list. This gives a friendly message when no items exist.

intermediate

What accessibility considerations should you keep in mind for empty states?

Use clear text labels, readable fonts, and sufficient color contrast. Also, make sure screen readers can read the empty state message so all users understand the screen.

What should an empty state screen NOT do?

A Show a friendly message explaining no data

B Include an icon or image to support the message

C Offer a button to add or refresh data

D Display a confusing blank screen with no explanation

An empty state should never be a confusing blank screen. It should clearly explain why there is no data.

In SwiftUI, how do you show an empty state when a list is empty?

A Use an if statement to check if the list is empty and show a message instead

B Hide the entire view

C Use a for loop to add empty items

D Always show the list even if empty

You use conditional UI with if to show a message when the list has no items.

Which element is helpful to add in an empty state to guide users?

A A button to add or refresh data

B A loading spinner

C A random image unrelated to the app

D A large block of text

A button helps users take action, like adding new data or refreshing the screen.

What accessibility feature is important for empty state messages?

A Use very small font size

B Use color only without text

C Make sure screen readers can read the message

D Hide the message from assistive technologies

Screen readers must read the empty state message so all users understand the screen.

Which of these is NOT a good practice for empty state design?

A Use simple, clear language

B Leave the screen blank with no explanation

C Provide a visual icon or image

D Encourage user action with a button

Leaving the screen blank with no explanation confuses users and is a bad practice.

Explain what an empty state is and why it matters in mobile app design.

Think about what users see when no data is available.

Describe how you would implement an empty state in a SwiftUI app.

Consider conditional views in SwiftUI.

Practice

1. What is the main purpose of handling an empty state in an iOS app?

easy

A. To hide the entire screen without any message

B. To crash the app when data is missing

C. To show a friendly message when there is no data to display

D. To load data repeatedly until available

Solution

1. Step 1: Understand empty state concept

   Empty state means no data is available to show in the UI.

2. Step 2: Purpose of empty state handling

   It improves user experience by showing a helpful message or guide instead of a blank screen.

3. Final Answer:

   To show a friendly message when there is no data to display -> Option C

4. Quick Check:

   Empty state = friendly message [OK]

Hint: Empty state means no data, so show a message [OK]

Common Mistakes:

• Ignoring empty data and showing blank screen
• Crashing app when data is empty
• Reloading data endlessly without message

2. Which Swift code snippet correctly checks if an array named items is empty?

easy

A. if items.isEmpty {}

B. if items.length == 0 {}

C. if items == nil {}

D. if items.count > 0 {}

Solution

1. Step 1: Identify correct Swift property for empty check

   Swift arrays have an isEmpty property to check if they contain no elements.

2. Step 2: Compare options

   if items.isEmpty {} uses items.isEmpty, which is the recommended and clear way to check emptiness.

3. Final Answer:

   if items.isEmpty {} -> Option A

4. Quick Check:

   Use isEmpty to check empty array [OK]

Hint: Use isEmpty property for arrays in Swift [OK]

Common Mistakes:

• Using count > 0 (checks non-empty)
• Checking items == nil (array is not optional)
• Using length property which does not exist for arrays

3. Given this Swift code, what will be the output when items is empty?

let items: [String] = []
if items.isEmpty {
  print("No items found")
} else {
  print("Items available")
}

medium

A. No items found

B. Items available

C. Nothing is printed

D. Runtime error

Solution

1. Step 1: Check the array content

   The array items is empty as it has no elements.

2. Step 2: Evaluate the if condition

   The condition items.isEmpty is true, so the first print statement runs.

3. Final Answer:

   No items found -> Option A

4. Quick Check:

   Empty array triggers "No items found" [OK]

Hint: Empty array triggers isEmpty true branch [OK]

Common Mistakes:

• Assuming else branch runs for empty array
• Expecting no output instead of print
• Thinking code crashes on empty array

4. Identify the error in this Swift code for empty state handling:

var data: [String]?
if data.isEmpty {
  print("No data")
}

medium

A. Using var instead of let causes error

B. data is optional, so isEmpty cannot be called directly

C. Missing else block for non-empty data

D. No error, code is correct

Solution

1. Step 1: Analyze variable type

   Variable data is an optional array ([String]?), meaning it can be nil.

2. Step 2: Check method call on optional

   You cannot call isEmpty directly on an optional without unwrapping it first.

3. Final Answer:

   data is optional, so isEmpty cannot be called directly -> Option B

4. Quick Check:

   Optional must be unwrapped before isEmpty [OK]

Hint: Optional arrays need unwrapping before isEmpty [OK]

Common Mistakes:

• Calling isEmpty directly on optional causes compile error
• Ignoring optional and assuming non-optional
• Thinking var vs let affects isEmpty usage

5. You want to show a label with text "No messages" only when the messages array is empty. Which SwiftUI code correctly handles this empty state?

hard

A. if messages.count > 0 { Text("No messages") } else { List(messages, id: \.self) { Text($0) } }

B. List(messages, id: \.self) { Text($0) } always shows, no empty state

C. Text(messages.isEmpty ? "No messages" : "")

D. if messages.isEmpty { Text("No messages") } else { List(messages, id: \.self) { Text($0) } }

Solution

1. Step 1: Understand the requirement

   Show "No messages" label only when messages array is empty, otherwise show the list.

2. Step 2: Evaluate options

   if messages.isEmpty { Text("No messages") } else { List(messages, id: \.self) { Text($0) } } uses if messages.isEmpty to conditionally show the label or the list, which is correct.

3. Step 3: Check other options

   if messages.count > 0 { Text("No messages") } else { List(messages, id: \.self) { Text($0) } } reverses the condition incorrectly. Text(messages.isEmpty ? "No messages" : "") shows empty text instead of list. List(messages, id: \.self) { Text($0) } always shows, no empty state never shows empty state.

4. Final Answer:

   if messages.isEmpty { Text("No messages") } else { List(messages, id: \.self) { Text($0) } } -> Option D

5. Quick Check:

   Use if isEmpty to toggle empty state UI [OK]

Hint: Use if isEmpty to show empty state or data list [OK]

Common Mistakes:

• Reversing the condition logic
• Showing empty text instead of list
• Not handling empty state at all