Iframe response viewer

src/App.tsx

@@ -13,10 +13,13 @@ interface Response {
 function App() {
     const [responseBody, setResponseBody] = useState<Response | null>(null);
     const [url, setUrl] = useState("");
+    const [loading, setLoading] = useState(false);
 
     async function sendRequest() {
+        setLoading(true);
         const body = await invoke("send_request", {url: url}) as Response;
         setResponseBody(body);
+        setLoading(false);
     }
 
     return (
@@ -33,7 +36,7 @@ function App() {
                     onChange={(e) => setUrl(e.currentTarget.value)}
                     placeholder="Enter a URL..."
                 />
-                <button type="submit">Send</button>
+                <button type="submit" disabled={loading}>{loading ? 'Sending...' : 'Send'}</button>
             </form>
             {responseBody !== null && (
                 <>
@@ -44,7 +47,12 @@ function App() {
                         &nbsp;&bull;&nbsp;
                         {responseBody?.elapsed2}ms
                     </div>
-                    <Editor value={responseBody?.body}/>
+                    <div className="row">
+                        <Editor value={responseBody?.body}/>
+                        <div className="iframe-wrapper">
+                            <iframe srcDoc={responseBody.body}/>
+                        </div>
+                    </div>
                 </>
             )}
         </div>

src/Editor.css

@@ -1,13 +1,24 @@
 .cm-editor {
-    height: 20rem;
     background-color: #000;
-    border-radius: 0.5rem;
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
     text-align: left;
-    width: 100%;
     font-size: 0.8rem;
+}
+
+.cm-editor, .iframe-wrapper {
     padding: 0.3rem 0.5rem;
+    width: 100%;
+    height: 30rem;
+    border-radius: 0.5rem;
+    overflow: hidden;
+}
+
+iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    border-radius: 0.5rem;
 }
 
 .cm-editor.cm-focused {

src/Editor.tsx

@@ -8,6 +8,6 @@ interface Props {
 export default function Editor(props: Props) {
     const {ref} = useCodeMirror({value: props.value});
     return (
-        <div ref={ref} id="editor-yo" style={{height: '10rem'}}/>
+        <div ref={ref} id="editor-yo" />
     )
 }

src/style.css

@@ -49,7 +49,8 @@ div, form, p {
 }
 
 .row {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   justify-content: center;
   width: 100%;
 }
@@ -84,6 +85,13 @@ button {
 
 button {
   cursor: pointer;
+  width: 7rem;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+button:disabled {
+  opacity: 0.7;
 }
 
 button:hover {