feat: moon loader animation (#12)

package.json

@@ -14,6 +14,7 @@
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.3",
     "react-scripts": "5.0.1",
+    "react-spinners": "^0.13.8",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/app/api/apiSlice.js

@@ -3,7 +3,7 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
 export const apiSlice = createApi({
     // https://todolistapi-kcjj.onrender.com
     reducerPath: 'api',
-    baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:8080' }),
+    baseQuery: fetchBaseQuery({ baseUrl: 'https://todolistapi-kcjj.onrender.com' }),
     tagTypes: ['Todos'],
     endpoints: (builder) => ({
         getTodos: builder.query({

src/features/todos/TodoList.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPlus, faXmark } from '@fortawesome/free-solid-svg-icons'
 import { useState, useEffect, useRef } from 'react'
+import MoonLoader from 'react-spinners/MoonLoader'
 import { 
     useGetTodosQuery,
     useAddTodoMutation,
@@ -142,7 +143,15 @@ const TodoList = () => {
 
     let content;
     if (isLoading) {
-        content = <p>Loading ...</p>
+         content =  (
+            <div className="loader">
+                <MoonLoader
+                    color="#92aafa"
+                    loading
+                    size={100}
+                />
+            </div>
+         )
     } else if (isSuccess){
         let sortedTodos = todos;
         if (todos.length> 1){

src/index.css

@@ -279,4 +279,10 @@ input:checked + .slider:before {
 ::-webkit-scrollbar-thumb:hover {
   background: #92aafa;
   border-radius: 10px
+}
+
+.loader{
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }