From 5a0132ea3f840f84fd30ca556d96e298ebb36a70 Mon Sep 17 00:00:00 2001
From: Aleksandar <aleksandar@e-vlasotince.info>
Date: Wed, 13 Aug 2025 02:56:59 +0200
Subject: [PATCH] Add Spinner while AI Review is Loading

---
 frontend/src/App.css                      | 12 ++----
 frontend/src/App.jsx                      | 22 ++++++-----
 frontend/src/components/Loader.jsx        |  7 ++++
 frontend/src/components/Loader.module.css | 48 +++++++++++++++++++++++
 package-lock.json                         |  6 +++
 5 files changed, 78 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/components/Loader.jsx
 create mode 100644 frontend/src/components/Loader.module.css
 create mode 100644 package-lock.json

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 6cfda20..8a9f006 100644
--- a/frontend/src/App.css
+++ b/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;
 }
-
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 929ed13..4b67942 100644
--- a/frontend/src/App.jsx
+++ b/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>
     </>
diff --git a/frontend/src/components/Loader.jsx b/frontend/src/components/Loader.jsx
new file mode 100644
index 0000000..7d691d2
--- /dev/null
+++ b/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;
diff --git a/frontend/src/components/Loader.module.css b/frontend/src/components/Loader.module.css
new file mode 100644
index 0000000..61b3bb3
--- /dev/null
+++ b/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%);
+  }
+}
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..44ab0c0
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "coderev",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}