From 81b1982d4f29c0d8d101e840f35018a0ea7c1524 Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Sun, 8 Oct 2023 00:03:32 +0530
Subject: [PATCH] feat: response overlay polish

---
 .../bruno-app/src/components/RequestPane/QueryUrl/index.js | 5 ++---
 .../src/components/ResponsePane/Overlay/StyledWrapper.js   | 5 +++++
 .../bruno-app/src/components/ResponsePane/Overlay/index.js | 6 +++---
 packages/bruno-app/src/components/ResponsePane/index.js    | 7 ++++---
 .../src/providers/ReduxStore/slices/collections/index.js   | 1 -
 packages/bruno-app/src/themes/dark.js                      | 3 ++-
 packages/bruno-app/src/themes/light.js                     | 3 ++-
 7 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
index 4b5b68a00..0a45f1a7d 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
@@ -5,8 +5,7 @@ import { requestUrlChanged, updateRequestMethod } from 'providers/ReduxStore/sli
 import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import HttpMethodSelector from './HttpMethodSelector';
 import { useTheme } from 'providers/Theme';
-import SendIcon from 'components/Icons/Send';
-import { IconDeviceFloppy } from '@tabler/icons';
+import { IconDeviceFloppy, IconArrowRight } from '@tabler/icons';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { isMacOS } from 'utils/common/platform';
 import StyledWrapper from './StyledWrapper';
@@ -90,7 +89,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
               Save <span className="shortcut">({saveShortcut})</span>
             </span>
           </div>
-          <SendIcon color={theme.requestTabPanel.url.icon} width={22} />
+          <IconArrowRight color={theme.requestTabPanel.url.icon} strokeWidth={1.5} size={22} />
         </div>
       </div>
     </StyledWrapper>
diff --git a/packages/bruno-app/src/components/ResponsePane/Overlay/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/Overlay/StyledWrapper.js
index 573872ce9..68779c3c2 100644
--- a/packages/bruno-app/src/components/ResponsePane/Overlay/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/Overlay/StyledWrapper.js
@@ -1,6 +1,11 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  position: absolute;
+  z-index: 1;
+  height: 100vh;
+  background-color: ${(props) => props.theme.requestTabPanel.responseOverlayBg};
+
   div.overlay {
     position: absolute;
     top: 0;
diff --git a/packages/bruno-app/src/components/ResponsePane/Overlay/index.js b/packages/bruno-app/src/components/ResponsePane/Overlay/index.js
index b525460dc..e5f659862 100644
--- a/packages/bruno-app/src/components/ResponsePane/Overlay/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/Overlay/index.js
@@ -13,17 +13,17 @@ const ResponseLoadingOverlay = ({ item, collection }) => {
   };
 
   return (
-    <StyledWrapper className="mt-4 px-3 w-full">
+    <StyledWrapper className="px-3 w-full">
       <div className="overlay">
         <div style={{ marginBottom: 15, fontSize: 26 }}>
-          <div style={{ display: 'inline-block', fontSize: 24, marginLeft: 5, marginRight: 5 }}>
+          <div style={{ display: 'inline-block', fontSize: 20, marginLeft: 5, marginRight: 5 }}>
             <StopWatch />
           </div>
         </div>
         <IconRefresh size={24} className="loading-icon" />
         <button
           onClick={handleCancelRequest}
-          className="mt-4 uppercase btn-md rounded btn-secondary ease-linear transition-all duration-150"
+          className="mt-4 uppercase btn-sm rounded btn-secondary ease-linear transition-all duration-150"
           type="button"
         >
           Cancel Request
diff --git a/packages/bruno-app/src/components/ResponsePane/index.js b/packages/bruno-app/src/components/ResponsePane/index.js
index 9cd45e0ca..e38538145 100644
--- a/packages/bruno-app/src/components/ResponsePane/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/index.js
@@ -61,15 +61,15 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
     }
   };
 
-  if (isLoading) {
+  if (isLoading && !item.response) {
     return (
-      <StyledWrapper className="flex h-full relative">
+      <StyledWrapper className="flex flex-col h-full relative">
         <Overlay item={item} collection={collection} />
       </StyledWrapper>
     );
   }
 
-  if (response.state !== 'success') {
+  if (!item.response) {
     return (
       <StyledWrapper className="flex h-full relative">
         <Placeholder />
@@ -116,6 +116,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
         ) : null}
       </div>
       <section className={`flex flex-grow ${focusedTab.responsePaneTab === 'response' ? '' : 'mt-4'}`}>
+        {isLoading ? <Overlay item={item} collection={collection} /> : null}
         {getTabPanel(focusedTab.responsePaneTab)}
       </section>
     </StyledWrapper>
diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js b/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
index f1f9699a8..f4eebec66 100644
--- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
@@ -1114,7 +1114,6 @@ export const collectionsSlice = createSlice({
             const { cancelTokenUid } = action.payload;
             item.requestUid = requestUid;
             item.requestState = 'queued';
-            item.response = null;
             item.cancelTokenUid = cancelTokenUid;
           }
 
diff --git a/packages/bruno-app/src/themes/dark.js b/packages/bruno-app/src/themes/dark.js
index f93fc646a..3dda2505d 100644
--- a/packages/bruno-app/src/themes/dark.js
+++ b/packages/bruno-app/src/themes/dark.js
@@ -109,7 +109,8 @@ const darkTheme = {
     responseSendIcon: '#555',
     responseStatus: '#ccc',
     responseOk: '#8cd656',
-    responseError: '#f06f57'
+    responseError: '#f06f57',
+    responseOverlayBg: 'rgba(30, 30, 30, 0.6)'
   },
 
   collection: {
diff --git a/packages/bruno-app/src/themes/light.js b/packages/bruno-app/src/themes/light.js
index b461f44de..5b9f1a8bc 100644
--- a/packages/bruno-app/src/themes/light.js
+++ b/packages/bruno-app/src/themes/light.js
@@ -109,7 +109,8 @@ const lightTheme = {
     responseSendIcon: 'rgb(209, 213, 219)',
     responseStatus: 'rgb(117 117 117)',
     responseOk: '#047857',
-    responseError: 'rgb(185, 28, 28)'
+    responseError: 'rgb(185, 28, 28)',
+    responseOverlayBg: 'rgba(255, 255, 255, 0.6)'
   },
 
   collection: {