feat: add loader spinner on initial data rendering

src/App.tsx

@@ -8,16 +8,18 @@ import ChatIndex from "./sections/ChatIndex/ChatIndex"
 import NotFound from "./sections/NotFound/NotFound"
 import Register from "./sections/Register/Register"
 import Login from "./sections/Login/Login"
+import LoaderSpinner from "./components/LoaderSpinner/LoaderSpinner"
 
 function App() {
   const alertMessage = useSelector((state: any) => state.alertMessage)
   const loader = useSelector((state: any) => state.loader)
-
+  const loaderSpinner = useSelector((state: any) => state.loaderSpinner)
   return (
     <div className="App">
       <ShowChatProvider>
         {alertMessage.visible && <AlertMessage />}
         {loader.status && <Loader progress={loader.progress} />}
+        {loaderSpinner.status && <LoaderSpinner />}
         <BrowserRouter>
           <Routes>
             <Route path="/accounts/*">

src/components/Chats/useChats.ts

@@ -1,14 +1,16 @@
 import { useEffect } from "react"
-import { useSelector } from "react-redux"
+import { useDispatch, useSelector } from "react-redux"
 import { useFetchingMethod } from "../../apollo/useFetchingMethod"
 import { chatsFromLoggedUser } from "../../graphql/queries"
 import { setChats } from "../../slicers/chatsSlice"
+import { stopLoaderSpinner } from "../../slicers/loaderSpinnerSlice"
 
 export const useChats = () => {
   const loggedUser = useSelector((state: any) => state.loggedUser)
   const chats = useSelector((state: any) => state.chats)
+  const dispatch = useDispatch()
 
-  const { lazyQueryMethod: getChats } = useFetchingMethod(chatsFromLoggedUser, setChats)
+  const { lazyQueryMethod: getChats, loading } = useFetchingMethod(chatsFromLoggedUser, setChats)
 
   const defineChatName = (users: any) => {
     const chatName = users.find((user: any) => user.id !== loggedUser.id && user).username
@@ -22,5 +24,9 @@ export const useChats = () => {
       })
   }, [loggedUser.id])
 
+  useEffect(() => {
+    !loading && chats && dispatch(stopLoaderSpinner())
+  }, [loading])
+
   return { chats, defineChatName }
 }

src/components/LoaderSpinner/LoaderSpinner.tsx

@@ -0,0 +1,21 @@
+import { Oval } from "react-loader-spinner"
+
+export default function LoaderSpinner() {
+  return (
+    <div className="loader-spinner">
+      <Oval
+        height={100}
+        width={100}
+        color="#dd4ec6"
+        wrapperStyle={{}}
+        wrapperClass=""
+        visible={true}
+        ariaLabel="oval-loading"
+        secondaryColor="#8d4fc9"
+        strokeWidth={2}
+        strokeWidthSecondary={2}
+      />
+      <p>Cargando Parches Chat...</p>
+    </div>
+  )
+}

src/components/LoaderSpinner/_loaderSpinner.scss

@@ -0,0 +1,14 @@
+.loader-spinner {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  background-color: black;
+  position: absolute;
+  z-index: 100;
+  color: white;
+  font-size: 20px;
+}

src/scss/index.css

@@ -1079,4 +1079,19 @@ html body #root .App ul {
 .add-friend-section .results .results__item .results__icon {
   width: 25px;
   height: 25px;
+}
+
+.loader-spinner {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  background-color: black;
+  position: absolute;
+  z-index: 100;
+  color: white;
+  font-size: 20px;
 }/*# sourceMappingURL=index.css.map */

src/scss/index.scss

@@ -63,3 +63,4 @@ html {
 @import "../components/LoggedUserArea/loggedUserArea";
 @import "../components/UserQuickOptions/userQuickOptions";
 @import "../components/AddFriend/addFriend";
+@import "../components/LoaderSpinner/loaderSpinner";

src/sections/ChatIndex/useChatIndex.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react"
-import { useSelector } from "react-redux"
+import { useDispatch, useSelector } from "react-redux"
 import { setLoggedUserField } from "../../slicers/loggedUserSlice"
 import { LOGGED_USER_MESSAGE_NOTIFICATION_SUSCRIPTION } from "../../graphql/subscriptions"
 import { LoggedUserId, chatById } from "../../graphql/queries"
@@ -9,6 +9,7 @@ import Chat from "../../components/Chat/Chat"
 import Home from "../Home/Home"
 import { useNotifications } from "../../hooks/useNotifications"
 import { useSubscription } from "@apollo/client"
+import { startLoaderSpinner } from "../../slicers/loaderSpinnerSlice"
 
 const maxMobileDeviceWidth = 480
 const notMobile = window.screen.width >= maxMobileDeviceWidth
@@ -19,7 +20,7 @@ export const useChatIndex = (chatContainer: React.MutableRefObject<undefined>) =
   const [firstAccess, setFirstAccess] = useState(!notMobile)
   const { showChat } = useShowChat()
   const { data } = useSubscription(LOGGED_USER_MESSAGE_NOTIFICATION_SUSCRIPTION, { variables: { userId: loggedUser.id } })
-
+  const dispatch = useDispatch()
   const { emitSoundOnNewMessage, showNewNotificationOnBrowserTab, showCurrentNotificationsOnBrowserTab } = useNotifications()
 
   const desktopBehaviour = () => (showChat ? <Chat chatContainer={chatContainer} /> : <Home />)
@@ -39,6 +40,7 @@ export const useChatIndex = (chatContainer: React.MutableRefObject<undefined>) =
 
   useEffect(() => {
     showCurrentNotificationsOnBrowserTab()
+    dispatch(startLoaderSpinner())
   }, [])
 
   return { firstAccess, setFirstAccess, mobileBehaviour, desktopBehaviour, notMobile }

src/slicers/loaderSpinnerSlice.ts

@@ -0,0 +1,26 @@
+import { createSlice } from "@reduxjs/toolkit"
+
+interface loader {
+  status: boolean
+}
+
+const initialState: loader = {
+  status: false
+}
+
+export const loaderSpinnerSlice = createSlice({
+  name: "loader",
+  initialState,
+  reducers: {
+    startLoaderSpinner: state => {
+      state.status = true
+    },
+    stopLoaderSpinner: state => {
+      state.status = false
+    }
+  }
+})
+
+export const { startLoaderSpinner, stopLoaderSpinner } = loaderSpinnerSlice.actions
+
+export default loaderSpinnerSlice.reducer

src/store/store.ts

@@ -1,4 +1,5 @@
 import { configureStore } from "@reduxjs/toolkit"
+import loaderSpinnerReducer from "../slicers/loaderSpinnerSlice"
 import alertMessageReducer from "../slicers/alertMessageSlice"
 import loggedUserReducer from "../slicers/loggedUserSlice"
 import messsagesReducer from "../slicers/messagesSlice"
@@ -15,6 +16,7 @@ export const store = configureStore({
     groups: gropsReducer,
     chats: chatsReducer,
     chat: chatReducer,
-    messages: messsagesReducer
+    messages: messsagesReducer,
+    loaderSpinner: loaderSpinnerReducer
   }
 })