laoder updated and config file is fixed

Author: muhammadfarooq85

src/Components/ChatContainer/ChatContainer.jsx

@@ -13,7 +13,6 @@ import {
   VoiceCallButton,
   VideoCallButton,
   ConversationHeader,
-  Loader,
   TypingIndicator,
 } from "@chatscope/chat-ui-kit-react";
 import {
@@ -44,6 +43,7 @@ import { IoSettingsOutline } from "react-icons/io5";
 import { MdOutlineDeleteSweep } from "react-icons/md";
 import FloatBtnComp from "../FloatButton/FloatBtn";
 import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
+import LoaderComp from "../Loader/Loader";
 
 function UserChat() {
   const [messageInputValue, setMessageInputValue] = useState("");
@@ -304,8 +304,8 @@ function UserChat() {
   // Showing loader
   if (loading) {
     return (
-      <div className="flex justify-center items-center h-screen">
-        <Loader />
+      <div className="loader-container">
+        <LoaderComp />
       </div>
     );
   }

src/Components/Loader/Loader.jsx

@@ -0,0 +1,6 @@
+const LoaderComp = () => {
+    
+  return <div className="loader"></div>;
+};
+
+export default LoaderComp;

src/Routes/Router.jsx

@@ -3,7 +3,7 @@ import UserSignupPage from "../Pages/SignupLogin/SignupLogin";
 import ChatPage from "../Pages/Chat/Chat";
 import { useEffect, useState } from "react";
 import { onAuthStateChanged, auth } from "../config/firebase.config";
-import { Loader } from "@chatscope/chat-ui-kit-react";
+import LoaderComp from "../Components/Loader/Loader";
 
 function RouterComp() {
   const [isUser, setIsUser] = useState(false);
@@ -23,8 +23,8 @@ function RouterComp() {
 
   if (loading) {
     return (
-      <div className="flex justify-center items-center h-screen">
-        <Loader />
+      <div className="loader-container">
+        <LoaderComp />
       </div>
     );
   }

src/config/conf.js

@@ -4,7 +4,7 @@ const firebaseKeys = {
   authDomain: String(import.meta.env.VITE_AUTH_DOMAIN),
   projectId: String(import.meta.env.VITE_PROJECT_ID),
   storageBucket: String(import.meta.env.VITE_STORAGE_BUCKET),
-  VITE_MESSANGING_SENDER_ID: String(import.meta.env.VITE_MESSANGING_SENDER_ID),
-  VITE_APP_ID: String(import.meta.env.VITE_APP_ID),
+  messagingSenderId: String(import.meta.env.VITE_MESSANGING_SENDER_ID),
+  appId: String(import.meta.env.VITE_APP_ID),
 };
 export default firebaseKeys;

src/index.scss

@@ -84,14 +84,36 @@ body {
 }
 
 //Loader Css
-.cs-loader {
-  font-size: 50px !important;
-}
-.cs-loader::before {
-  border-color: #9ab3e3 !important;
-}
-.cs-loader::after {
-  border-color: #4a79ca transparent transparent !important;
+.loader-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.loader {
+  width: 120px;
+  height: 22px;
+  border-radius: 20px;
+  color: #123d82;
+  border: 2px solid;
+  position: relative;
+}
+
+.loader::before {
+  content: "";
+  position: absolute;
+  margin: 2px;
+  inset: 0 100% 0 0;
+  border-radius: inherit;
+  background: currentColor;
+  animation: l6 2s infinite;
+}
+
+@keyframes l6 {
+  100% {
+    inset: 0;
+  }
 }
 
 //Media Queries