Handling Empty States in Svelte Kanban Applications

Welcome to the third lesson of our Advanced UI Features and Theming course! In our previous lessons, we built a comprehensive notification system to provide feedback after actions and implemented loading indicators to show when operations are in progress. Now, we'll focus on another crucial aspect of user experience: empty states.

Empty states occur when there's no data to display in a particular view or section of your application. These moments are important opportunities to guide users, especially when they're new to your application or have just completed actions that cleared content.

Without well-designed empty states, users might encounter blank screens that provide no guidance on what to do next. This can lead to confusion, frustration, and even abandonment of your application. By implementing thoughtful empty states, you can:

• Guide users on how to proceed when no content exists
• Explain why content is missing and how to add it
• Maintain visual consistency and avoid jarring blank spaces
• Create a more polished, professional user experience

Our Kanban application already handles notifications after operations and loading indicators during operations, but it doesn't provide guidance when lists are empty. For example, when a user clears all tasks from a column, they see a blank space with no explanation or guidance.

Empty states work hand in hand with our existing UI features:

• Notifications tell users what happened
• Loading indicators tell users what's happening
• Empty states tell users what could happen next

Together, these three features create a complete communication system that guides users through every possible state of your application. Let's start by creating a reusable EmptyState component that we can use throughout our Kanban board.

Let's create a flexible, reusable EmptyState component that we can use in different contexts throughout our application. This component will display an appropriate icon and message based on the type of empty state we want to show.

Create a new file called EmptyState.svelte in the src/components directory:

<script>
  let { type = 'tasks', message = '' } = $props();
  
  // Messages for different empty states
  const defaultMessages = {
    tasks: 'No tasks found. Create your first task above!',
    todo: 'No tasks in To Do. Add a new task to get started!',
    inprogress: 'No tasks in progress. Move tasks here when you start working on them.',
    done: 'No completed tasks yet. You\'ll get there!'
  };
  
  // Use provided message or default from messages object
  const displayMessage = $derived(
    message || defaultMessages[type] || defaultMessages.tasks
  );
  
  // Icons for different empty states
  const icons = {
    tasks: '📋',
    todo: '🔍',
    inprogress: '⏳',
    done: '🎯'
  };
  
  const icon = $derived(icons[type] || icons.tasks);
</script>

<div class="empty-state">
  <div class="empty-icon">{icon}</div>
  <p class="empty-message">{displayMessage}</p>
</div>

<style>
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    background: rgba(237, 242, 247, 0.5);
    border-radius: 6px;
    margin: 1rem 0;
  }
  
  .empty-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
  
  .empty-message {
    margin: 0;
    color: #718096;
    font-size: 0.9rem;
    max-width: 250px;
  }
</style>

Let's break down this component:

First, we define two props using the $props() rune:

• type: Specifies which type of empty state to display (defaults to 'tasks')
• message: An optional custom message to override the default

We then create an object called defaultMessages that contains predefined messages for different types of empty states:

• tasks: For when the entire board is empty
• todo: For when the "To Do" column is empty
• inprogress: For when the "In Progress" column is empty
• done: For when the "Done" column is empty

Using the $derived rune, we create a reactive displayMessage value that shows either the custom message provided via props or falls back to the appropriate default message based on the type.

Similarly, we define an icons object with appropriate emoji icons for each type of empty state and create a reactive icon value that selects the right icon based on the type.

The component's markup is simple: a container with an icon and a message. The styling creates a light, centered box with a subtle background that stands out just enough to be noticeable without being distracting.

This component is highly reusable because it can adapt to different contexts through its props. You can use it anywhere in your application where you need to display an empty state, and it will show an appropriate message and icon.

Now that we have our EmptyState component, let's explore how to create context-specific empty states for different parts of our application.