feat: Response Placeholder Component

renderer/components/ResponsePane/Placeholder/StyledWrapper.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  padding-top: 20%;
+  width: 100%;
+`;
+
+export default StyledWrapper;
+

renderer/components/ResponsePane/Placeholder/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { IconSend } from '@tabler/icons';
+import StyledWrapper from './StyledWrapper';
+
+const Placeholder = () => {
+  return (
+    <StyledWrapper>
+      <div className="text-gray-300 flex justify-center" style={{fontSize: 200}}>
+        <IconSend size={150} strokeWidth={1}/>
+      </div>
+      <div className="flex mt-4">
+        <div className="flex flex-1 flex-col items-end px-1">
+          <div className="px-1 py-2">Send Request</div>
+          <div className="px-1 py-2">New Request</div>
+          <div className="px-1 py-2">Edit Environments</div>
+          <div className="px-1 py-2">Help</div>
+        </div>
+        <div className="flex flex-1 flex-col px-1">
+          <div className="px-1 py-2">Cmd + Enter</div>
+          <div className="px-1 py-2">Cmd + N</div>
+          <div className="px-1 py-2">Cmd + E</div>
+          <div className="px-1 py-2">Cmd + H</div>
+        </div>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default Placeholder;

renderer/components/ResponsePane/index.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import classnames from 'classnames';
 import QueryResult from './QueryResult';
 import Overlay from './Overlay';
+import Placeholder from './Placeholder';
 import ResponseHeaders from './ResponseHeaders';
 import StatusCode from './StatusCode';
 import ResponseTime from './ResponseTime';
@@ -50,6 +51,14 @@ const ResponsePane = ({rightPaneWidth, response, isLoading}) => {
     );
   }
 
+  if(response.state !== 'success') {
+    return (
+      <StyledWrapper className="flex h-full relative">
+        <Placeholder />
+      </StyledWrapper>
+    );
+  }
+
   return (
     <StyledWrapper className="flex flex-col h-full relative">
       <div className="flex items-center px-3 tabs mt-1" role="tablist">

renderer/network/index.js

@@ -17,6 +17,7 @@ const sendRequest = async (item, collectionUid, dispatch) => {
         dispatch({
           type: actions.RESPONSE_RECEIVED,
           response: {
+            state: 'success',
             data: response.data,
             headers: Object.entries(response.headers),
             size: response.headers["content-length"],

renderer/styles/globals.css

@@ -3,7 +3,7 @@
   --color-brand: #546de5;
   --color-sidebar-collection-item-active-indent-border: #d0d0d0;
   --color-sidebar-collection-item-active-background: #dddddd;
-  --color-sidebar-background: rgb(243, 243, 243);
+  --color-sidebar-background: #f3f3f3;
   --color-request-dragbar-background: #e2e2e2;
   --color-request-dragbar-background-active: #bbb;
   --color-tab-active-border: #4d4d4d;