feat: loading network calls (#15)

tobiasprima · Mar 21, 2024 · 01886ad · 01886ad
1 parent 8fa33c7
commit 01886ad
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/src/features/todos/TodoList.js b/src/features/todos/TodoList.js
@@ -33,8 +33,8 @@ const TodoList = () => {
     const [ addTodo ] = useAddTodoMutation()
     const [ doneTodo ] = useDoneTodoMutation()
     const [ deleteTodo ] = useDeleteTodoMutation()
-    const [ reorderTodo ] = useReorderTodoMutation()
-    const [ resetTodo ] = useResetTodoMutation()
+    const [ reorderTodo, { isLoading: reorderTodoLoading } ] = useReorderTodoMutation()
+    const [ resetTodo, { isLoading: resetTodoLoading } ] = useResetTodoMutation()
 
 
     // Effect to load todos from local storage if there is cache
@@ -133,7 +133,7 @@ const TodoList = () => {
     }
 
     let content;
-    if (isLoading) {
+    if (isLoading || reorderTodoLoading || resetTodoLoading) {
         content = <Loader />
     } else if (isSuccess){
         let sortedTodos = todos;
@@ -190,6 +190,9 @@ const TodoList = () => {
                 handleSubmit={handleSubmit}
             />
         </div>
+        <div className="infos">
+            <span className="ps">Because the backend is hosted on a free cloud provider, the request may take a while.</span>
+        </div>
     </main>
   )
 }

diff --git a/src/index.css b/src/index.css
@@ -285,4 +285,22 @@ input:checked + .slider:before {
   display: flex;
   justify-content: center;
   align-items: center;
+}
+
+.infos{
+  position: fixed;
+  margin-top: 1rem;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 600px;
+}
+
+.ps {
+  justify-content: center;
+  margin-left: 1rem;
+  align-items: center;
+  width: 600px;
+  font-size: 15px;
 }