Added loading to console and enabled autoscrolling

src/components/common/LogStream/LogStreamConsole.tsx

 import { useEffect, useState } from "react";
 import { styled } from "@mui/material/styles";
+import { LinearProgress } from "@mui/material";
 
 /* Log data must contain a wrapping <pre> </pre>
 around content that should be displayed*/
@@ -8,6 +9,7 @@ interface LogStreamConsoleProps {
   log: string;
   dataReady: boolean;
   height: string;
+  loading?: boolean;
 }
 
 const ConsoleElement = styled("div")(({ theme }) => ({
@@ -27,36 +29,63 @@ const ConsoleElement = styled("div")(({ theme }) => ({
 export const LogStreamConsole = ({
   log,
   dataReady,
-  height
+  height,
+  loading
 }: LogStreamConsoleProps) => {
-  const [enableAutoScroll, setEnableAutoScroll] = useState(true);
+  const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
+  const [preElementYPosition, setPreElementYPosition] = useState(0);
+
+  // eslint-disable-next-line
+  const handleScroll = (e: any) => {
+    const preElement = e.currentTarget;
+    if (preElementYPosition > preElement.scrollTop) {
+      // Scroll up event
+      setAutoScrollEnabled(false);
+    } else if (
+      preElement.scrollHeight - preElement.scrollTop ===
+      preElement.clientHeight
+    ) {
+      // Scroll to bottom
+      setAutoScrollEnabled(true);
+    }
+    setPreElementYPosition(preElement.scrollTop);
+  };
 
   useEffect(() => {
-    if (dataReady && enableAutoScroll) {
+    if (dataReady) {
       const parent = document.getElementsByClassName("console");
-
       if (parent) {
         Array.from(parent).forEach((par) => {
           const preElements = par.getElementsByTagName("pre");
-          if (preElements.length > 0) {
-            preElements[0].scrollTop = preElements[0].scrollHeight;
-            setEnableAutoScroll(false);
+          if (preElements.length > 0 && preElements[0]) {
+            if (log && autoScrollEnabled) {
+              preElements[0].onscroll = handleScroll;
+              preElements[0].scrollTop = preElements[0].scrollHeight;
+            }
           }
         });
       }
     }
-  }, [dataReady, enableAutoScroll]);
+  }, [dataReady]);
 
   return (
-    <ConsoleElement
-      className="console"
-      sx={{
-        maxHeight: height,
-        minHeight: height,
-        "& pre": { maxHeight: height }
-      }}
-      // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML={{ __html: log }}
-    />
+    <>
+      {!loading ? (
+        <ConsoleElement
+          className="console"
+          sx={{
+            maxHeight: height,
+            minHeight: height,
+            "& pre": { height: height }
+          }}
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: log }}
+        />
+      ) : (
+        <div style={{ width: "100%" }}>
+          <LinearProgress color="primary" />
+        </div>
+      )}
+    </>
   );
 };

src/components/common/Loki/LokiPanel.js

@@ -239,7 +239,7 @@ export function LokiPanel({ hostName, iocName, isSyslog, isDeployed }) {
 
   return (
     <Box>
-      {sysLogData || procServLog || !isDeployed || !periodChange ? (
+      {sysLogData || procServLog || !isDeployed ? (
         <Box>
           <Stack
             display="flex"
@@ -277,6 +277,7 @@ export function LokiPanel({ hostName, iocName, isSyslog, isDeployed }) {
             log={html}
             dataReady={dataReady}
             height="500px"
+            loading={periodChange}
           />
         </Box>
       ) : (