Empty State Guiding the User When No Cities Exist

An empty state is shown when the application has no saved cities.

Instead of displaying a blank sidebar, the Weather App uses a StatusPage to guide the user.

This improves clarity and prevents confusion during first launch.

Creating the Empty State

In the Weather App, the empty state is created like this:

#![allow(unused)]
fn main() {
let sidebar_empty = StatusPage::new();
sidebar_empty.set_title("Add first city");
sidebar_empty.set_description(Some(
    "Hit '+' to add a city to display the weather"
));
sidebar_empty.set_vexpand(true);
}

This creates a centered message inside the sidebar.

The message:

Explains what to do
Mentions the "+" button
Avoids showing a useless blank space

The layout feels intentional instead of unfinished.

Why Not Show an Empty List?

If only a ListBox were shown:

The sidebar would look broken
Users might think something failed
No guidance would be provided

The empty state solves this by:

Communicating clearly
Reducing onboarding friction
Improving first-time experience

This is especially important for beginner users.

Toggling Between Empty State and List

The Weather App switches visibility depending on whether cities exist.

Simplified logic:

#![allow(unused)]
fn main() {
let is_empty = cities.borrow().is_empty();

empty_page.set_visible(is_empty);
scroller.set_visible(!is_empty);
}

This ensures:

When no cities exist → show StatusPage
When cities exist → show scrollable list

Only one element is visible at a time.

This avoids layout conflicts and overlapping widgets.

Clearing the List When Empty

When the list becomes empty, the app also clears the ListBox:

#![allow(unused)]
fn main() {
clear_listbox(&city_list);
}

This prevents:

Old rows from remaining in memory
Visual inconsistencies
Incorrect state representation

The UI always reflects the real data state.

The empty state also affects navigation behavior.

When there are no cities:

Forward navigation is disabled
Content panel remains empty

This prevents the user from navigating to a meaningless weather screen.

This logic improves consistency across the entire layout.

UX Perspective

The empty state demonstrates good UI practice:

Always explain what the user should do
Avoid blank areas
Provide actionable guidance
Connect instructions to visible UI elements

Instead of overwhelming the user, the interface gently instructs them.

Architectural Role

Within the sidebar structure:

Sidebar Box
    ├── Search Row
    ├── StatusPage (if empty)
    └── City List (if not empty)

The empty state is part of the navigation layer.

It does not perform logic itself.

It simply reflects application state.

This separation keeps the design clean and maintainable.

Why This Matters for Developer Onboarding

For new developers, this feature teaches:

How to reflect application state in UI
How to toggle widget visibility correctly
Why UX decisions matter in technical design
How small improvements improve overall quality

It shows that building applications is not only about functionality, but also about user guidance.

Developer Onboarding for LinuxMobile Platform