We have created a working Todo-app, and it looks awful. Nobody wants an app like that. We need to make it look a lot nicer to get users to actually enjoy it. We are going to use Tailwind.css to style this, not because we have to, but because it is all the rage right now. Is it better than all the other CSS tools? I do not know, it might be, but probably not. We will use it anyway.
Let us be clear about one thing before we get started. Optimistic UI has been around for ages. It's not tied to Remix in any way, and you can create optimistic UI in any framework in any language. But, Remix makes it a lot easier to create optimistic UI than most other frameworks.
The problem we will solve in this episode of the series is about forms. Clearing inputs and returning focus to the first logical input. This way the user can fill in the form, hit enter, and then return to the first input field to fill in the next instance.
We can add and delete tasks, but the UI isn't showing us what is happening if we have a slow network. We should tell the user that we're adding or deleting. And we should do it while they wait for the database communication to happen.
We already have a loader that can access the database to fetch data. But we need a way to send data to the database. We do that with an action function.
We want to load our data from an external resource, and eventually that will be a database. We'll start by cheating though, and continue to use our constant todoList.