From beca266eef6cf6ed7b7c4f460f0c3c8c62c09a4f Mon Sep 17 00:00:00 2001
From: Dunemask <dunemask@gmail.com>
Date: Sat, 10 Feb 2024 18:10:29 -0700
Subject: [PATCH] [FEATURE] Cleaned up terminal display

---
 src/components/servers/RconView.jsx | 33 ++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/components/servers/RconView.jsx b/src/components/servers/RconView.jsx
index cf503b2..8bbccbd 100644
--- a/src/components/servers/RconView.jsx
+++ b/src/components/servers/RconView.jsx
@@ -2,10 +2,21 @@ import { useState, useEffect, useRef } from "react";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
+import Skeleton from "@mui/material/Skeleton";
 import Typography from "@mui/material/Typography";
 import RconSocket from "./RconSocket.js";
 import "@mcl/css/rcon.css";
 
+function RconLogSkeleton() {
+  return (
+    <Skeleton
+      variant="text"
+      width="100%"
+      sx={{ backgroundColor: "rgba(255,255,255,.25)" }}
+    />
+  );
+}
+
 export default function RconView(props) {
   const { serverId } = props;
   const logsRef = useRef(0);
@@ -49,18 +60,21 @@ export default function RconView(props) {
           backgroundColor: "rgba(0,0,0,.815)",
           color: "white",
           borderRadius: "4px",
-          width:"100%"
+          width: "100%",
         }}
       >
-        {logs.map((v, k) => (
-          <Box key={k}>
-            <Typography variant="subtitle2">{v}</Typography>
-          </Box>
-        ))}
+        {logs.length === 0 &&
+          [...Array(20).keys()].map((_v, i) => <RconLogSkeleton key={i} />)}
+        {logs.length > 0 &&
+          logs.map((v, k) => (
+            <Box key={k}>
+              <Typography variant="subtitle2">{v}</Typography>
+            </Box>
+          ))}
       </Box>
       <Box
         className="rconActions"
-        sx={{ marginTop: "auto", paddingTop: "1rem" }}
+        sx={{ marginTop: "auto", paddingTop: "1rem", width: "100%" }}
       >
         <TextField
           id="outlined-basic"
@@ -69,9 +83,12 @@ export default function RconView(props) {
           value={cmd}
           onChange={updateCmd}
           disabled={!(rcon && rcon.rconLive && !rcon.rconError)}
+          sx={{ width: "100%" }}
         />
         {rcon && rcon.rconLive && !rcon.rconError && (
-          <Button onClick={sendCommand}>Send</Button>
+          <Button onClick={sendCommand} sx={{ padding: "0 2rem" }}>
+            Send
+          </Button>
         )}
         {!(rcon && rcon.rconLive && !rcon.rconError) && (
           <Button color="secondary">Not Connected</Button>