Add Spinner while AI Review is Loading

frontend/src/App.css

@@ -25,10 +25,10 @@ main .right {
   flex-basis: 50%;
   border-radius: 1.5rem;
 }
-main .left{
+main .left {
   background-color: #000000;
   position: relative;
-} 
+}
 
 .left .code,
 .code pre,
@@ -38,9 +38,7 @@ main .left{
   margin: 0;
   border-radius: 0.7rem;
   background-color: #000000;
-
 }
-
 
 main .left .review {
   position: absolute;
@@ -53,15 +51,14 @@ main .left .review {
   cursor: pointer;
   user-select: none;
   border-radius: 0.6rem;
-
 }
 
-main .right{
+main .right {
   background-color: #343434;
   padding: 1rem 2rem;
   font-size: 1.5rem;
   overflow: auto;
-
+  position: relative;
 }
 
 /* Light theme ke liye */
@@ -173,4 +170,3 @@ button:hover {
   border-color: #555;
   color: #eee;
 }
-

frontend/src/App.jsx

@@ -1,12 +1,15 @@
-import { useState, useEffect } from "react";
+import "highlight.js/styles/github-dark.css";
 import "prismjs/themes/prism-tomorrow.css";
-import Editor from "react-simple-code-editor";
+import "./App.css";
+
+import { useEffect, useState } from "react";
+
+import axios from "axios";
 import prism from "prismjs";
 import Markdown from "react-markdown";
+import Editor from "react-simple-code-editor";
 import rehypeHighlight from "rehype-highlight";
-import "highlight.js/styles/github-dark.css";
-import axios from "axios";
-import "./App.css";
+import Loader from "./components/Loader";
 
 function App() {
   console.log("💡 BACKEND URL:", import.meta.env.VITE_BACKEND_URL);
@@ -121,15 +124,16 @@ function App() {
             ></textarea>
             <button onClick={explainDSA}>📘 Explain DSA</button>
             <div className="dsa-result">
-              <Markdown rehypePlugins={[rehypeHighlight]}>
-                {dsaResult}
-              </Markdown>
+              <Markdown rehypePlugins={[rehypeHighlight]}>{dsaResult}</Markdown>
             </div>
           </div>
         </div>
 
         <div className="right">
-          <Markdown rehypePlugins={[rehypeHighlight]}>{review}</Markdown>
+          <>
+            {loading && <Loader />}
+            <Markdown rehypePlugins={[rehypeHighlight]}>{review}</Markdown>
+          </>
         </div>
       </main>
     </>

frontend/src/components/Loader.jsx

@@ -0,0 +1,7 @@
+import style from "./Loader.module.css";
+
+const Loader = () => {
+  return <span className={style.loader}></span>;
+};
+
+export default Loader;

frontend/src/components/Loader.module.css

@@ -0,0 +1,48 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  position: absolute;
+  animation: rotate 1s linear infinite;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+}
+.loader::before,
+.loader::after {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  inset: 0px;
+  border-radius: 50%;
+  border: 5px solid #fff;
+  animation: prixClipFix 2s linear infinite;
+}
+.loader::after {
+  transform: rotate3d(90, 90, 0, 180deg);
+  border-color: #ff3d00;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes prixClipFix {
+  0% {
+    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+  50% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+  }
+  75%,
+  100% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+  }
+}