refactor: response overlay

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;
+

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;

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;

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"

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 flex-col h-full">
+      <StyledWrapper className="flex h-full relative">
+        <Overlay />
+      </StyledWrapper>
+    );
+  }
+
+  return (
+    <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>