17 Oct 2024

Remix Todo App: Part 4 - Pending UI

Improve user experience by adding pending states and implementing network-aware UI feedbacks.

Introduction

This is part 4 of the Remix Todo App Series, which aims to teach you everything about Remix that you’ll use daily. In part 3, we enhanced the todo app with functionality to mark tasks as completed, edit, delete, clear all completed tasks, delete all tasks, and view only active or completed tasks.

In this part, we’ll discuss pending UI in Remix. Unlike other frameworks, Remix builds on the core model of HTML and browser behaviour, handling state differently. While many React-based frameworks rely on useState for managing pending UI during network interactions, Remix simplifies this with useNavigation and useFetcher.

Types of pending UI

So far, our todo app lacks visual feedback during network interactions. We can improve this by using useNavigation and useFetcher to create a network-aware interface for a better user experience. But before we proceed, let’s review the main types of pending UI to help us choose the appropriate feedback mechanism for various use cases.

Skeleton fallbacks: Displays a visual placeholder outlining the structure of upcoming content. It’s typically used when loading non-critical data for initial page rendering.
Busy indicators: Shows a visual sign while an action is being processed by the server. It’s used when the outcome is uncertain, requiring a wait for the server’s response before updating the UI.
Optimisitic UI: Updates the UI with an expected state before receiving the server’s response. It’s used when the outcome can be reliably predicted, enabling immediate feedback.

Implementing pending UI

As discussed, use skeleton fallbacks for data loading, busy indicators for data creation, and optimistic UI for updates. We’ll implement:

Busy indicators for adding tasks, clearing completed tasks, or deleting all tasks
Optimistic UI for marking tasks as completed, saving, or deleting

We’re skipping skeleton fallbacks for initial task loading since tasks are critical data. To implement it, use defer in the loader, render with <Await>, and wrap it in <Suspense>. For details, see the Remix streaming docs.

Pending states from <Form> or useSubmit can be accessed via useNavigation. For <fetcher.Form> or fetcher.submit, use useFetcher. To track all pending states, use useFetchers.

Busy Indicators for adding, clearing, or deleting tasks

Our busy indicators will be a decrease in opacity and disabled form controls. When adding a task, we’ll reduce the opacity of the add form and disable the input and button. When clearing all completed tasks, we’ll lower the opacity of those tasks and disable their controls. For deleting all tasks, we’ll do the same for all tasks.

Update app/routes/_index.tsx with the following changes to implement the visual cues when adding a new task:

1
import type { ActionFunctionArgs, MetaFunction } from "@remix-run/node";
2
import {
3
  Form,
4
  Link,
5
  json,
6
  useFetcher,
7
  useLoaderData,
8
  useSearchParams,
9
} from "@remix-run/react";
10
import { useEffect, useRef } from "react";
11
import type { Item, View } from "~/types";
12

13
import TodoActions from "~/components/TodoActions";
14
import TodoList from "~/components/TodoList";
15

16
import { todos } from "~/lib/db.server";
17

18
// ...existing code here remains the same
19

20
// ...existing code here remains the same
21

22
// ...existing code here remains the same
23

24
export default function Home() {
25
  const { tasks } = useLoaderData<typeof loader>();
26
  const fetcher = useFetcher();
27
  const [searchParams] = useSearchParams();
28
  const view = searchParams.get("view") || "all";
29
  const addFormRef = useRef<HTMLFormElement>(null);
30
  const addInputRef = useRef<HTMLInputElement>(null);
31

32
  const isAdding =
33
    fetcher.state === "submitting" &&
34
    fetcher.formData?.get("intent") === "create task";
35

36
  useEffect(() => {
37
    if (!isAdding) {
38
      addFormRef.current?.reset();
39
      addInputRef.current?.focus();
40
    }
41
  }, [isAdding]);
42

43
  return (
44
    <div className="flex flex-1 flex-col md:mx-auto md:w-[720px]">
45
      {/* ...existing code here remains the same */}
46

47
      <main className="flex-1 space-y-8">
48
        <fetcher.Form
49
          ref={addFormRef}
50
          method="post"
51
          className="rounded-full border border-gray-200 bg-white/90 shadow-md dark:border-gray-700 dark:bg-gray-900"
52
        >
53
          <fieldset className="flex items-center gap-2 p-2 text-sm">
54
          <fieldset
55
            disabled={isAdding}
56
            className="flex items-center gap-2 p-2 text-sm disabled:pointer-events-none disabled:opacity-25"
57
          >
58
            <input
59
              ref={addInputRef}
60
              type="text"
61
              name="description"
62
              placeholder="Create a new todo..."
63
              required
64
              className="flex-1 rounded-full border-2 border-gray-200 px-3 py-2 text-sm font-bold text-black dark:border-white/50"
65
            />
66
            <button
67
              name="intent"
68
              value="create task"
69
              className="rounded-full border-2 border-gray-200/50 bg-gradient-to-tl from-[#00fff0] to-[#0083fe] px-3 py-2 text-base font-black transition hover:scale-105 hover:border-gray-500 sm:px-6 dark:border-white/50 dark:from-[#8e0e00] dark:to-[#1f1c18] dark:hover:border-white"
70
            >
71
              {isAdding ? "Adding..." : "Add"}
72
            </button>
73
          </fieldset>
74
        </fetcher.Form>
75

76
        {/* ...existing code here remains the same */}
77

78
        {/* ...existing code here remains the same */}
79

80
        {/* ...existing code here remains the same */}
81
      </main>
82

83
      {/* ...existing code here remains the same */}
84
    </div>
85
  );
86
}

Notice the useEffect? It clears the input after a task is successfully submitted. With useEffect, once the action completes, we reset the form and focus back on the input.

Next, update app/components/TodoActions.tsx with the following changes to implement the visual cues when clearing completed or deleting all tasks:

1
import { useFetcher } from "@remix-run/react";
2
import type { Item } from "~/types";
3

4
export default function TodoActions({ tasks }: { tasks: Item[] }) {
5
  const fetcher = useFetcher();
6

7
  const isClearingCompleted =
8
    fetcher.state === "submitting" &&
9
    fetcher.formData?.get("intent") === "clear completed";
10

11
  const isDeletingAll =
12
    fetcher.state === "submitting" &&
13
    fetcher.formData?.get("intent") === "delete all";
14

15
  return (
16
    <div className="flex items-center justify-between gap-4 text-sm">
17
      <p className="text-center leading-7">
18
        {tasks.length} {tasks.length === 1 ? "item" : "items"} left
19
      </p>
20
      <fetcher.Form
21
        method="post"
22
        className="flex items-center gap-4"
23
        onSubmit={(event) => {
24
          const submitter = (event.nativeEvent as SubmitEvent)
25
            .submitter as HTMLButtonElement;
26

27
          if (
28
            submitter.value === "clear completed" &&
29
            !confirm("Are you sure you want to clear all completed tasks?")
30
          ) {
31
            event.preventDefault();
32
            return;
33
          } else if (
34
            submitter.value === "delete all" &&
35
            !confirm("Are you sure you want to delete all tasks?")
36
          ) {
37
            event.preventDefault();
38
            return;
39
          }
40
        }}
41
      >
42
        <button
43
          disabled={
44
            !tasks.some((todo) => todo.completed) || isClearingCompleted
45
          }
46
          name="intent"
47
          value="clear completed"
48
          className="text-red-400 transition hover:text-red-600 disabled:pointer-events-none disabled:opacity-25"
49
        >
50
          {isClearingCompleted ? "Clearing..." : "Clear Completed"}
51
        </button>
52
        <button
53
          disabled={tasks.length === 0 || isDeletingAll}
54
          name="intent"
55
          value="delete all"
56
          className="text-red-400 transition hover:text-red-600 disabled:pointer-events-none disabled:opacity-25"
57
        >
58
          {isDeletingAll ? "Deleting..." : "Delete All"}
59
        </button>
60
      </fetcher.Form>
61
    </div>
62
  );
63
}

Finally, update app/components/TodoItem.tsx to apply visual cues when clearing completed or deleting all tasks:

1
import { useFetcher, useFetchers } from "@remix-run/react";
2
import { useState } from "react";
3
import type { Item } from "~/types";
4

5
import DeleteIcon from "~/components/icons/DeleteIcon";
6
import EditIcon from "~/components/icons/EditIcon";
7
import SaveIcon from "~/components/icons/SaveIcon";
8
import SquareCheckIcon from "~/components/icons/SquareCheckIcon";
9
import SquareIcon from "~/components/icons/SquareIcon";
10

11
const dateFormatter = new Intl.DateTimeFormat("en-GB", {
12
  day: "numeric",
13
  month: "short",
14
  year: "numeric",
15
  hour: "numeric",
16
  minute: "numeric",
17
  hour12: true,
18
  timeZone: "UTC",
19
});
20

21
export default function TodoItem({ todo }: { todo: Item }) {
22
  const fetchers = useFetchers();
23
  const fetcher = useFetcher();
24
  const [isEditing, setIsEditing] = useState(false);
25

26
  const editing = typeof document !== "undefined" ? isEditing : todo.editing;
27

28
  const isClearingCompleted = fetchers.some(
29
    (fetcher) =>
30
      fetcher.state === "submitting" &&
31
      fetcher.formData?.get("intent") === "clear completed",
32
  );
33

34
  const isDeletingAll = fetchers.some(
35
    (fetcher) =>
36
      fetcher.state === "submitting" &&
37
      fetcher.formData?.get("intent") === "delete all",
38
  );
39

40
  const actionInProgress =
41
    isDeletingAll || (todo.completed && isClearingCompleted);
42

43
  return (
44
    <li
45
      className={`my-4 flex gap-4 border-b border-dashed border-gray-200 pb-4 last:border-none last:pb-0 dark:border-gray-700 ${
46
        editing ? "items-center" : "items-start"
47
      }`}
48
    >
49
      <fetcher.Form method="post">
50
        <input type="hidden" name="id" value={todo.id} />
51
        <input type="hidden" name="completed" value={`${todo.completed}`} />
52
        <button
53
          aria-label={`Mark task as ${
54
            todo.completed ? "incomplete" : "complete"
55
          }`}
56
          disabled={editing || actionInProgress}
57
          name="intent"
58
          value="toggle completion"
59
          className="rounded-full border border-gray-200 p-1 transition hover:bg-gray-200 disabled:pointer-events-none disabled:opacity-25 dark:border-gray-700 dark:hover:bg-gray-700"
60
        >
61
          {todo.completed ? (
62
            <SquareCheckIcon className="h-4 w-4" />
63
          ) : (
64
            <SquareIcon className="h-4 w-4" />
65
          )}
66
        </button>
67
      </fetcher.Form>
68

69
      {!editing && (
70
        <div
71
          className={`flex-1 space-y-0.5 ${
72
            todo.completed || actionInProgress ? "opacity-25" : ""
73
          }`}
74
        >
75
          <p>{todo.description}</p>
76
          <div className="space-y-0.5 text-xs">
77
            <p>
78
              Created at{" "}
79
              <time dateTime={`${new Date(todo.createdAt).toISOString()}`}>
80
                {dateFormatter.format(new Date(todo.createdAt))}
81
              </time>
82
            </p>
83
            {todo.completed && (
84
              <p>
85
                Completed at{" "}
86
                <time dateTime={`${new Date(todo.completedAt!).toISOString()}`}>
87
                  {dateFormatter.format(new Date(todo.completedAt!))}
88
                </time>
89
              </p>
90
            )}
91
          </div>
92
        </div>
93
      )}
94

95
      <fetcher.Form
96
        method="post"
97
        className={`flex items-center gap-4 ${editing ? "flex-1" : ""}`}
98
        onSubmit={(event) => {
99
          const submitter = (event.nativeEvent as SubmitEvent)
100
            .submitter as HTMLButtonElement;
101

102
          if (submitter.value === "edit task") {
103
            setIsEditing(true);
104
            event.preventDefault();
105
            return;
106
          }
107

108
          if (submitter.value === "save task") {
109
            setIsEditing(false);
110
            return;
111
          }
112

113
          if (
114
            submitter.value === "delete task" &&
115
            !confirm("Are you sure you want to delete this task?")
116
          ) {
117
            event.preventDefault();
118
            return;
119
          }
120
        }}
121
      >
122
        <input type="hidden" name="id" value={todo.id} />
123
        {editing ? (
124
          <>
125
            <input
126
              name="description"
127
              defaultValue={todo.description}
128
              required
129
              className="flex-1 rounded-full border-2 px-3 py-2 text-sm text-black"
130
            />
131
            <button
132
              aria-label="Save task"
133
              disabled={actionInProgress}
134
              name="intent"
135
              value="save task"
136
              className="rounded-full border border-gray-200 p-1 transition hover:bg-gray-200 dark:border-gray-700 dark:hover:bg-gray-700"
137
            >
138
              <SaveIcon className="h-4 w-4" />
139
            </button>
140
          </>
141
        ) : (
142
          <button
143
            aria-label="Edit task"
144
            disabled={todo.completed || actionInProgress}
145
            name="intent"
146
            value="edit task"
147
            className="rounded-full border border-gray-200 p-1 transition hover:bg-gray-200 disabled:pointer-events-none disabled:opacity-25 dark:border-gray-700 dark:hover:bg-gray-700"
148
          >
149
            <EditIcon className="h-4 w-4" />
150
          </button>
151
        )}
152
        <button
153
          aria-label="Delete task"
154
          disabled={todo.completed || editing || actionInProgress}
155
          name="intent"
156
          value="delete task"
157
          className="rounded-full border border-gray-200 p-1 transition hover:bg-gray-200 disabled:pointer-events-none disabled:opacity-25 dark:border-gray-700 dark:hover:bg-gray-700"
158
        >
159
          <DeleteIcon className="h-4 w-4" />
160
        </button>
161
      </fetcher.Form>
162
    </li>
163
  );
164
}

Notice the useFetchers hook? It returns an array of all active fetchers. Since the TodoItem component didn’t create the “Clear Completed” or “Delete All” fetchers, we use this to track their submissions. Now, clicking “Clear Completed” or “Delete All” won’t only disable the buttons but also reduce the opacity of the tasks being removed.

Optimisitic UI for task-specific interactions

When a user toggles a task’s completion, saves it after editing, or deletes it, we can predict the next UI state. So, we’ll optimistically update the UI immediately after these actions and then revert to the actual data from the database once the form is successfully submitted and Remix completes revalidation.

Update app/components/TodoItem.tsx with the following changes:

1
import { useFetcher, useFetchers } from "@remix-run/react";
2
import { useState } from "react";
3
import type { Item } from "~/types";
4

5
import DeleteIcon from "~/components/icons/DeleteIcon";
6
import EditIcon from "~/components/icons/EditIcon";
7
import SaveIcon from "~/components/icons/SaveIcon";
8
import SquareCheckIcon from "~/components/icons/SquareCheckIcon";
9
import SquareIcon from "~/components/icons/SquareIcon";
10

11
const dateFormatter = new Intl.DateTimeFormat("en-GB", {
12
  day: "numeric",
13
  month: "short",
14
  year: "numeric",
15
  hour: "numeric",
16
  minute: "numeric",
17
  hour12: true,
18
  timeZone: "UTC",
19
});
20

21
export default function TodoItem({ todo }: { todo: Item }) {
22
  const fetchers = useFetchers();
23
  const fetcher = useFetcher();
24
  const [isEditing, setIsEditing] = useState(false);
25

26
  const editing = typeof document !== "undefined" ? isEditing : todo.editing;
27

28
  const isClearingCompleted = fetchers.some(
29
    (fetcher) =>
30
      fetcher.state === "submitting" &&
31
      fetcher.formData?.get("intent") === "clear completed",
32
  );
33

34
  const isDeletingAll = fetchers.some(
35
    (fetcher) =>
36
      fetcher.state === "submitting" &&
37
      fetcher.formData?.get("intent") === "delete all",
38
  );
39

40
  const actionInProgress =
41
    isDeletingAll || (todo.completed && isClearingCompleted);
42

43
  const isTogglingCompletion =
44
    fetcher.state !== "idle" &&
45
    fetcher.formData?.get("intent") === "toggle completion";
46

47
  const isSaving =
48
    fetcher.state !== "idle" && fetcher.formData?.get("intent") === "save task";
49

50
  const completed = isTogglingCompletion
51
    ? !JSON.parse(fetcher.formData?.get("completed") as string)
52
    : todo.completed;
53

54
  const completedAt =
55
    isTogglingCompletion || !todo.completedAt ? new Date() : todo.completedAt;
56

57
  const description = isSaving
58
    ? (fetcher.formData?.get("description") as string)
59
    : todo.description;
60

61
  return (
62
    <li
63
      className={`my-4 flex gap-4 border-b border-dashed border-gray-200 pb-4 last:border-none last:pb-0 dark:border-gray-700 ${
64
        editing ? "items-center" : "items-start"
65
      }`}
66
    >
67
      <fetcher.Form method="post">
68
        <input type="hidden" name="id" value={todo.id} />
69
        <input type="hidden" name="completed" value={`${completed}`} />
70
        <button
71
          aria-label={`Mark task as ${completed ? "incomplete" : "complete"}`}
72
          disabled={editing || actionInProgress}
73
          name="intent"
74
          value="toggle completion"
75
          className="rounded-full border border-gray-200 p-1 transition hover:bg-gray-200 disabled:pointer-events-none disabled:opacity-25 dark:border-gray-700 dark:hover:bg-gray-700"
76
        >
77
          {completed ? (
78
            <SquareCheckIcon className="h-4 w-4" />
79
          ) : (
80
            <SquareIcon className="h-4 w-4" />
81
          )}
82
        </button>
83
      </fetcher.Form>
84

85
      {!editing && (
86
        <div
87
          className={`flex-1 space-y-0.5 ${
88
            completed || actionInProgress ? "opacity-25" : ""
89
          }`}
90
        >
91
          <p>{description}</p>
92
          <div className="space-y-0.5 text-xs">
93
            <p>
94
              Created at{" "}
95
              <time dateTime={`${new Date(todo.createdAt).toISOString()}`}>
96
                {dateFormatter.format(new Date(todo.createdAt))}
97
              </time>
98
            </p>
99
            {completed && (
100
              <p>
101
                Completed at{" "}
102
                <time dateTime={`${new Date(completedAt).toISOString()}`}>
103
                  {dateFormatter.format(new Date(completedAt))}
104
                </time>
105
              </p>
106
            )}
107
          </div>
108
        </div>
109
      )}
110

111
      <fetcher.Form
112
        method="post"
113
        className={`flex items-center gap-4 ${editing ? "flex-1" : ""}`}
114
        onSubmit={(event) => {
115
          const submitter = (event.nativeEvent as SubmitEvent)
116
            .submitter as HTMLButtonElement;
117

118
          if (submitter.value === "edit task") {
119
            setIsEditing(true);
120
            event.preventDefault();
121
            return;
122
          }
123

124
          if (submitter.value === "save task") {
125
            setIsEditing(false);
126
            return;
127
          }
128

129
          if (
130
            submitter.value === "delete task" &&
131
            !confirm("Are you sure you want to delete this task?")
132
          ) {
133
            event.preventDefault();
134
            return;
135
          }
136
        }}
137
      >
138
        <input type="hidden" name="id" value={todo.id} />
139
        {editing ? (
140
          <>
141
            <input
142
              name="description"
143
              defaultValue={description}
144
              required
145
              className="flex-1 rounded-full border-2 px-3 py-2 text-sm text-black"
146
            />
147
            <button
148
              aria-label="Save task"
149
              disabled={actionInProgress}
150
              name="intent"
151
              value="save task"
152
              className="rounded-full border border-gray-200 p-1 transition hover:bg-gray-200 dark:border-gray-700 dark:hover:bg-gray-700"
153
            >
154
              <SaveIcon className="h-4 w-4" />
155
            </button>
156
          </>
157
        ) : (
158
          <button
159
            aria-label="Edit task"
160
            disabled={completed || actionInProgress}
161
            name="intent"
162
            value="edit task"
163
            className="rounded-full border border-gray-200 p-1 transition hover:bg-gray-200 disabled:pointer-events-none disabled:opacity-25 dark:border-gray-700 dark:hover:bg-gray-700"
164
          >
165
            <EditIcon className="h-4 w-4" />
166
          </button>
167
        )}
168
        <button
169
          aria-label="Delete task"
170
          disabled={completed || editing || actionInProgress}
171
          name="intent"
172
          value="delete task"
173
          className="rounded-full border border-gray-200 p-1 transition hover:bg-gray-200 disabled:pointer-events-none disabled:opacity-25 dark:border-gray-700 dark:hover:bg-gray-700"
174
        >
175
          <DeleteIcon className="h-4 w-4" />
176
        </button>
177
      </fetcher.Form>
178
    </li>
179
  );
180
}

Notice we’re using fetcher.state !== "idle". fetcher.state can be "submitting", "loading", or "idle". It’s "submitting" when a form is submitted and the route’s action (POST) or loader (GET) is called, "loading" when the loaders are reloading after an action submission, and "idle" when nothing is being fetched. Since we’re implementing optimistic UI, we want to display the database data only after the action completes and data is revalidated, which is why we use fetcher.state !== "idle". The UI updates optimistically and reverts to the database values after submission and revalidation.

We also want to optimistically complete or remove tasks from the visible list and adjust the task count when they are marked as completed or deleted. Update app/components/TodoList.tsx and app/components/TodoActions.tsx as follows:

1
import { useFetchers } from "@remix-run/react";
2
import { useMemo } from "react";
3
import type { Item, View } from "~/types";
4

5
import TodoItem from "~/components/TodoItem";
6

7
export default function TodoList({
8
  todos,
9
  view,
10
}: {
11
  todos: Item[];
12
  view: View;
13
}) {
14
  const fetchers = useFetchers();
15

16
  const isDeleting = fetchers.some(
17
    (fetcher) =>
18
      fetcher.state !== "idle" &&
19
      fetcher.formData?.get("intent") === "delete task",
20
  );
21

22
  const deletingTodoIds = fetchers
23
    .filter(
24
      (fetcher) =>
25
        fetcher.state !== "idle" &&
26
        fetcher.formData?.get("intent") === "delete task",
27
    )
28
    .map((fetcher) => fetcher.formData?.get("id"));
29
  const visibleTodos = useMemo(
30
    () =>
31
      todos.filter((todo) =>
32
        view === "active"
33
          ? !todo.completed
34
          : view === "completed"
35
            ? todo.completed
36
            : true,
37
      ),
38
    [todos, view],
39
  );
40

41
  const visibleTodos = useMemo(() => {
42
    let filteredTodos = todos.filter((todo) =>
43
      view === "active"
44
        ? !todo.completed
45
        : view === "completed"
46
          ? todo.completed
47
          : true,
48
    );
49

50
    if (isDeleting) {
51
      filteredTodos = filteredTodos.filter(
52
        (todo) => !deletingTodoIds.includes(todo.id),
53
      );
54
    }
55

56
    return filteredTodos;
57
  }, [deletingTodoIds, isDeleting, todos, view]);
58

59
  if (visibleTodos.length === 0) {
60
    return (
61
      <p className="text-center leading-7">
62
        {view === "all"
63
          ? "No tasks available"
64
          : view === "active"
65
            ? "No active tasks"
66
            : "No completed tasks"}
67
      </p>
68
    );
69
  }
70

71
  return (
72
    <ul>
73
      {visibleTodos.map((todo) => (
74
        <TodoItem key={todo.id} todo={todo} />
75
      ))}
76
    </ul>
77
  );
78
}

1
import { useFetcher, useFetchers } from "@remix-run/react";
2
import type { Item } from "~/types";
3

4
export default function TodoActions({ tasks }: { tasks: Item[] }) {
5
  const fetchers = useFetchers();
6
  const fetcher = useFetcher();
7

8
  const isClearingCompleted =
9
    fetcher.state === "submitting" &&
10
    fetcher.formData?.get("intent") === "clear completed";
11

12
  const isDeletingAll =
13
    fetcher.state === "submitting" &&
14
    fetcher.formData?.get("intent") === "delete all";
15

16
  const isTogglingCompletion = fetchers.some(
17
    (fetcher) =>
18
      fetcher.state !== "idle" &&
19
      fetcher.formData?.get("intent") === "toggle completion",
20
  );
21

22
  const isDeleting = fetchers.some(
23
    (fetcher) =>
24
      fetcher.state !== "idle" &&
25
      fetcher.formData?.get("intent") === "delete task",
26
  );
27

28
  const completingTodoIds = fetchers
29
    .filter(
30
      (fetcher) =>
31
        fetcher.state !== "idle" &&
32
        fetcher.formData?.get("intent") === "toggle completion",
33
    )
34
    .map((fetcher) => ({
35
      id: fetcher.formData?.get("id"),
36
      completed: fetcher.formData?.get("completed"),
37
    }));
38

39
  const deletingTodoIds = fetchers
40
    .filter(
41
      (fetcher) =>
42
        fetcher.state !== "idle" &&
43
        fetcher.formData?.get("intent") === "delete task",
44
    )
45
    .map((fetcher) => fetcher.formData?.get("id"));
46

47
  tasks = isTogglingCompletion
48
    ? tasks.map((task) => {
49
        const completingTodo = completingTodoIds.find(
50
          (todo) => todo.id === task.id,
51
        );
52
        if (completingTodo) {
53
          task.completed = !JSON.parse(completingTodo.completed as string);
54
        }
55
        return task;
56
      })
57
    : tasks;
58

59
  tasks = isDeleting
60
    ? tasks.filter((task) => !deletingTodoIds.includes(task.id))
61
    : tasks;
62

63
  return (
64
    <div className="flex items-center justify-between gap-4 text-sm">
65
      {/* ...existing code here remains the same */}
66
    </div>
67
  );
68
}

That’s it! You should now be able to perform any operation on a todo item and see it update optimistically. If the operation fails on the server, the data will revert to the database state. With that, we wrap up this article.

Conclusion

In this part of the series, you learned about pending UI. You implemented a skeleton fallback for initially loading tasks, busy indicators for creating, clearing, or deleting tasks, and optimistic UI when interacting with individual tasks. The todo app is now network-aware!

In the next part, you’ll learn how to add a theme switcher to the Remix app, enabling light, dark, or OS preference themes for the todo app. Stay tuned!