From 6c9f7250eaa27eb12cc3b563209c69bd808506da Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Fri, 28 Jan 2022 23:03:10 +0530
Subject: [PATCH] refactor: response overlay

---
 .../ResponsePane/Overlay/StyledWrapper.js     | 21 +++++++++++++++
 .../components/ResponsePane/Overlay/index.js  | 26 +++++++++++++++++++
 .../ResponsePane/QueryResult/StyledWrapper.js | 16 ------------
 .../ResponsePane/QueryResult/index.js         | 17 ------------
 .../src/components/ResponsePane/index.js      | 11 +++++++-
 5 files changed, 57 insertions(+), 34 deletions(-)
 create mode 100644 packages/grafnode-components/src/components/ResponsePane/Overlay/StyledWrapper.js
 create mode 100644 packages/grafnode-components/src/components/ResponsePane/Overlay/index.js

diff --git a/packages/grafnode-components/src/components/ResponsePane/Overlay/StyledWrapper.js b/packages/grafnode-components/src/components/ResponsePane/Overlay/StyledWrapper.js
new file mode 100644
index 000000000..11e0aeb05
--- /dev/null
+++ b/packages/grafnode-components/src/components/ResponsePane/Overlay/StyledWrapper.js
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  div.overlay{
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 9;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 20%;
+    overflow: hidden;
+    text-align: center;
+  }
+`;
+
+export default StyledWrapper;
+
diff --git a/packages/grafnode-components/src/components/ResponsePane/Overlay/index.js b/packages/grafnode-components/src/components/ResponsePane/Overlay/index.js
new file mode 100644
index 000000000..9b825da55
--- /dev/null
+++ b/packages/grafnode-components/src/components/ResponsePane/Overlay/index.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { IconRefresh } from '@tabler/icons';
+import StopWatch from '../../StopWatch';
+import StyledWrapper from './StyledWrapper';
+
+const QueryResult = () => {
+  return (
+    <StyledWrapper className="mt-4 px-3 w-full">
+      <div className="overlay">
+        <div style={{marginBottom: 15, fontSize: 26}}>
+          <div style={{display: 'inline-block', fontSize: 24, marginLeft: 5, marginRight: 5}}>
+            <StopWatch/>
+          </div>
+        </div>
+        <IconRefresh size={24} className="animate-spin"/>
+        <button
+          className="mt-4 uppercase bg-gray-200 active:bg-blueGray-600 text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
+        >
+          Cancel Request
+        </button>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default QueryResult;
diff --git a/packages/grafnode-components/src/components/ResponsePane/QueryResult/StyledWrapper.js b/packages/grafnode-components/src/components/ResponsePane/QueryResult/StyledWrapper.js
index d7f242d81..767544343 100644
--- a/packages/grafnode-components/src/components/ResponsePane/QueryResult/StyledWrapper.js
+++ b/packages/grafnode-components/src/components/ResponsePane/QueryResult/StyledWrapper.js
@@ -10,22 +10,6 @@ const StyledWrapper = styled.div`
   textarea.cm-editor {
     position: relative;
   }
-
-  div.overlay{
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    z-index: 9;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    text-align: center;
-    background: rgb(243 243 243 / 78%);
-  }
 `;
 
 export default StyledWrapper;
diff --git a/packages/grafnode-components/src/components/ResponsePane/QueryResult/index.js b/packages/grafnode-components/src/components/ResponsePane/QueryResult/index.js
index 476407f08..d09fa5727 100644
--- a/packages/grafnode-components/src/components/ResponsePane/QueryResult/index.js
+++ b/packages/grafnode-components/src/components/ResponsePane/QueryResult/index.js
@@ -1,6 +1,4 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { IconRefresh } from '@tabler/icons';
-import StopWatch from '../../StopWatch';
 import * as CodeMirror from 'codemirror';
 import StyledWrapper from './StyledWrapper';
 
@@ -38,21 +36,6 @@ const QueryResult = ({data, isLoading, width}) => {
 
   return (
     <StyledWrapper className="mt-4 px-3 w-full" style={{maxWidth: width}}>
-      {isLoading && (
-        <div className="overlay">
-          <div style={{marginBottom: 15, fontSize: 26}}>
-            <div style={{display: 'inline-block', fontSize: 24, marginLeft: 5, marginRight: 5}}>
-              <StopWatch/>
-            </div>
-          </div>
-          <IconRefresh size={24} className="animate-spin"/>
-          <button
-            className="mt-4 uppercase bg-gray-200 active:bg-blueGray-600 text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
-          >
-            Cancel Request
-          </button>
-        </div>
-      )}
       <div className="h-full">
         <textarea
           id="query-result"
diff --git a/packages/grafnode-components/src/components/ResponsePane/index.js b/packages/grafnode-components/src/components/ResponsePane/index.js
index 3d83f686b..4418670ce 100644
--- a/packages/grafnode-components/src/components/ResponsePane/index.js
+++ b/packages/grafnode-components/src/components/ResponsePane/index.js
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import classnames from 'classnames';
 import QueryResult from './QueryResult';
+import Overlay from './Overlay';
 import ResponseHeaders from './ResponseHeaders';
 import StatusCode from './StatusCode';
 import ResponseTime from './ResponseTime';
@@ -41,8 +42,16 @@ const ResponsePane = ({rightPaneWidth, response, isLoading}) => {
     }
   }
 
+  if(isLoading) {
+    return (
+      <StyledWrapper className="flex h-full relative">
+        <Overlay />
+      </StyledWrapper>
+    );
+  }
+
   return (
-    <StyledWrapper className="flex flex-col h-full">
+    <StyledWrapper className="flex flex-col h-full relative">
       <div className="flex items-center px-3 tabs mt-1" role="tablist">
         <div className={getTabClassname('response')} role="tab" onClick={() => setSelectedTab('response')}>Response</div>
         <div className={getTabClassname('headers')} role="tab" onClick={() => setSelectedTab('headers')}>Headers</div>