Adding Loading States and Indicators in Svelte

Welcome to the second lesson of our Advanced UI Features and Theming course! In our previous lesson, we built a comprehensive notification system to provide feedback after operations are complete. Now, we'll focus on what happens during those operations with loading states.

When your application performs asynchronous operations like fetching data or saving changes, users need visual feedback to understand that something is happening. Without loading indicators, users might wonder if their action was registered, leading to frustration or duplicate submissions. This is especially important in our Kanban application, where tasks are being created, moved, and deleted.

Loading indicators serve several important purposes:

• They reassure users that the system is working on their request
• They prevent users from submitting the same action multiple times
• They set expectations about response time
• They improve the perceived performance of your application

Our Kanban application currently lacks loading indicators. When you add a task or move it between columns, there's no visual feedback during the operation — you only see the notification after it completes. This creates a moment of uncertainty for users.

In this lesson, we'll build a loading state system that complements our notification system. While notifications tell users what happened after an operation, loading indicators show users what's happening during an operation. Together, they create a complete feedback loop that guides users through every step of their interaction with our application.

Let's start by creating a centralized loading state management system similar to our notification store from the previous lesson.

Just as we centralized our notifications in the previous lesson, we'll now create a centralized system for managing loading states. This will allow us to track loading operations across our application and display appropriate indicators wherever needed.

Let's create a new file called loadingStore.svelte.js in the src/lib directory:

// src/lib/loadingStore.svelte.js
// Loading state store to track loading operations
export const loadingStates = $state({
  global: false,
  tasks: false,
  addTask: false,
  deleteTask: false,
  moveTask: false
});

export function setLoading(key, isLoading) {
  if (key in loadingStates) {
    loadingStates[key] = isLoading;
  }
}

export async function withLoading(key, asyncFn) {
  setLoading(key, true);
  try {
    return await asyncFn();
  } finally {
    setLoading(key, false);
  }
}