From 50f2f54335e427a359b04760b394d335a9a34175 Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Sat, 7 Oct 2023 19:10:11 +0530
Subject: [PATCH] fix(#150): fixed arrow direction

---
 .../ResponsePane/Overlay/StyledWrapper.js      |  5 +++++
 .../components/ResponsePane/Overlay/index.js   |  2 +-
 packages/bruno-app/src/globalStyles.js         | 18 ++++++++++++++++++
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/bruno-app/src/components/ResponsePane/Overlay/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/Overlay/StyledWrapper.js
index f5440aaaf..573872ce9 100644
--- a/packages/bruno-app/src/components/ResponsePane/Overlay/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/Overlay/StyledWrapper.js
@@ -14,6 +14,11 @@ const StyledWrapper = styled.div`
     padding-top: 20%;
     overflow: hidden;
     text-align: center;
+
+    .loading-icon {
+      transform: scaleY(-1);
+      animation: rotateCounterClockwise 1s linear infinite;
+    }
   }
 `;
 
diff --git a/packages/bruno-app/src/components/ResponsePane/Overlay/index.js b/packages/bruno-app/src/components/ResponsePane/Overlay/index.js
index 8145a2b50..b525460dc 100644
--- a/packages/bruno-app/src/components/ResponsePane/Overlay/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/Overlay/index.js
@@ -20,7 +20,7 @@ const ResponseLoadingOverlay = ({ item, collection }) => {
             <StopWatch />
           </div>
         </div>
-        <IconRefresh size={24} className="animate-spin" />
+        <IconRefresh size={24} className="loading-icon" />
         <button
           onClick={handleCancelRequest}
           className="mt-4 uppercase btn-md rounded btn-secondary ease-linear transition-all duration-150"
diff --git a/packages/bruno-app/src/globalStyles.js b/packages/bruno-app/src/globalStyles.js
index 7cf517bdf..34e5e70aa 100644
--- a/packages/bruno-app/src/globalStyles.js
+++ b/packages/bruno-app/src/globalStyles.js
@@ -129,6 +129,24 @@ const GlobalStyle = createGlobalStyle`
     }
   }
 
+  @keyframes rotateClockwise {
+    0% {
+      transform: scaleY(-1) rotate(0deg);
+    }
+    100% {
+      transform: scaleY(-1) rotate(360deg);
+    }
+  }
+
+  @keyframes rotateCounterClockwise {
+    0% {
+      transform: scaleY(-1) rotate(360deg);
+    }
+    100% {
+      transform: scaleY(-1) rotate(0deg);
+    }
+  }
+
   // codemirror
   .CodeMirror {
     .cm-variable-valid {