Add load state in <StateContextProvider/> and disable UI elements based on the state.

new-log-viewer/src/components/DropFileContainer/index.css

@@ -28,3 +28,7 @@
 
     background-color: #f3f3f3;
 }
+
+.hover-message-loading {
+    background-color: #fce4e4;
+}

new-log-viewer/src/components/DropFileContainer/index.tsx

@@ -4,7 +4,9 @@
 } from "react";
 
 import {StateContext} from "../../contexts/StateContextProvider";
-import {CURSOR_CODE} from "../../typings/worker";
+import {
+    CURSOR_CODE,
+} from "../../typings/worker";
 
 import "./index.css";
 
@@ -21,7 +23,7 @@
  * @return
  */
 const DropFileContainer = ({children}: DropFileContextProviderProps) => {
-    const {loadFile} = useContext(StateContext);
+    const {loadFile, loadState} = useContext(StateContext);
     const [isFileHovering, setIsFileHovering] = useState(false);
 
     const handleDrag = (ev: React.DragEvent<HTMLDivElement>) => {
@@ -52,7 +54,6 @@
         ev.stopPropagation();
 
         setIsFileHovering(false);
-
         const [file] = ev.dataTransfer.files;
         if ("undefined" === typeof file) {
             console.warn("No file dropped.");
@@ -73,16 +74,10 @@
             <div onDrop={handleDrop}>
                 {children}
                 {isFileHovering && (
                     <div
                         className={"hover-mask"}
                         onDrop={handleDrop}
                     >
-                        <div
-                            className={"hover-message"}
-                            onDrop={handleDrop}
-                        >
-                            Drop file to view
-                        </div>
                     </div>
                 )}
             </div>

new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx

@@ -12,6 +12,7 @@ import {
     EXPORT_LOG_PROGRESS_VALUE_MAX,
     EXPORT_LOG_PROGRESS_VALUE_MIN,
 } from "../../services/LogExportManager";
+import {LOAD_STATE} from "../../typings/worker";
 import SmallIconButton from "./SmallIconButton";
 
 
@@ -21,16 +22,13 @@ import SmallIconButton from "./SmallIconButton";
  * @return
  */
 const ExportLogsButton = () => {
-    const {exportLogs, exportProgress, fileName} = useContext(StateContext);
+    const {exportLogs, exportProgress, loadState} = useContext(StateContext);
 
     return (
         <SmallIconButton
             disabled={
-                // eslint-disable-next-line no-warning-comments
-                // TODO: Replace `"" === fileName` with a more specific context variable that
-                // indicates whether the file has been loaded.
                 (null !== exportProgress && EXPORT_LOG_PROGRESS_VALUE_MAX !== exportProgress) ||
-                    "" === fileName
+                loadState !== LOAD_STATE.READY
             }
             onClick={exportLogs}
         >

new-log-viewer/src/components/MenuBar/NavigationBar.tsx

@@ -1,14 +1,19 @@
 import React, {useContext} from "react";
 
+import {
+    ButtonGroup,
+    IconButton,
+} from "@mui/joy";
+
 import NavigateBefore from "@mui/icons-material/NavigateBefore";
 import NavigateNext from "@mui/icons-material/NavigateNext";
 import SkipNext from "@mui/icons-material/SkipNext";
 import SkipPrevious from "@mui/icons-material/SkipPrevious";
 
 import {StateContext} from "../../contexts/StateContextProvider";
+import {LOAD_STATE} from "../../typings/worker";
 import {ACTION_NAME} from "../../utils/actions";
 import PageNumInput from "./PageNumInput";
-import SmallIconButton from "./SmallIconButton";
 
 
 /**
@@ -17,7 +22,7 @@ import SmallIconButton from "./SmallIconButton";
  * @return
  */
 const NavigationBar = () => {
-    const {loadPageByAction} = useContext(StateContext);
+    const {loadState, loadPageByAction} = useContext(StateContext);
 
     const handleNavButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
         const {actionName} = event.currentTarget.dataset;
@@ -34,35 +39,40 @@ const NavigationBar = () => {
     };
 
     return (
-        <>
-            <SmallIconButton
+        <ButtonGroup
+            disabled={loadState !== LOAD_STATE.READY}
+            size={"sm"}
+            spacing={0.01}
+            variant={"plain"}
+        >
+            <IconButton
                 data-action-name={ACTION_NAME.FIRST_PAGE}
                 onClick={handleNavButtonClick}
             >
                 <SkipPrevious/>
-            </SmallIconButton>
-            <SmallIconButton
+            </IconButton>
+            <IconButton
                 data-action-name={ACTION_NAME.PREV_PAGE}
                 onClick={handleNavButtonClick}
             >
                 <NavigateBefore/>
-            </SmallIconButton>
+            </IconButton>
 
             <PageNumInput/>
 
-            <SmallIconButton
+            <IconButton
                 data-action-name={ACTION_NAME.NEXT_PAGE}
                 onClick={handleNavButtonClick}
             >
                 <NavigateNext/>
-            </SmallIconButton>
-            <SmallIconButton
+            </IconButton>
+            <IconButton
                 data-action-name={ACTION_NAME.LAST_PAGE}
                 onClick={handleNavButtonClick}
             >
                 <SkipNext/>
-            </SmallIconButton>
-        </>
+            </IconButton>
+        </ButtonGroup>
     );
 };
 

new-log-viewer/src/components/MenuBar/PageNumInput.tsx

@@ -9,6 +9,7 @@
 import Input from "@mui/joy/Input";
 
 import {StateContext} from "../../contexts/StateContextProvider";
+import {LOAD_STATE} from "../../typings/worker";
 import {ACTION_NAME} from "../../utils/actions";
 
 import "./PageNumInput.css";
@@ -23,7 +24,7 @@
  * @return
  */
 const PageNumInput = () => {
-    const {loadPageByAction, numPages, pageNum} = useContext(StateContext);
+    const {loadState, loadPageByAction, numPages, pageNum} = useContext(StateContext);
 
     const [isEditing, setIsEditing] = useState<boolean>(false);
     const inputRef = useRef<HTMLInputElement>(null);
@@ -79,13 +80,15 @@
         >
             <Input
                 className={"page-num-input"}
+                disabled={loadState !== LOAD_STATE.READY}
                 size={"sm"}
                 slotProps={{input: {ref: inputRef}}}
                 type={"number"}
                 endDecorator={
                     <Typography
                         className={"page-num-input-num-pages-text"}
                         level={"body-md"}
+                        sx={loadState !== LOAD_STATE.READY ? { color: 'neutral.plainDisabledColor' } : {}}
                     >
                         {"/ "}
                         {numPages}

new-log-viewer/src/components/MenuBar/index.css

@@ -26,3 +26,13 @@
     flex-grow: 1;
     padding-left: 10px;
 }
+
+.menu-bar-loading-progress {
+    /* stylelint-disable-next-line custom-property-pattern */
+    --LinearProgress-thickness: 2px !important;
+    /* stylelint-disable-next-line custom-property-pattern */
+    --LinearProgress-progressThickness: 2px !important;
+
+    z-index: var(--ylv-loading-progress-z-index);
+    margin-bottom: -2px;
+}

new-log-viewer/src/components/MenuBar/index.tsx

@@ -3,6 +3,7 @@ import {useContext} from "react";
 import {
     Divider,
     IconButton,
+    LinearProgress,
     Sheet,
     Tooltip,
     Typography,
@@ -11,7 +12,10 @@ import {
 import FolderOpenIcon from "@mui/icons-material/FolderOpen";
 
 import {StateContext} from "../../contexts/StateContextProvider";
-import {CURSOR_CODE} from "../../typings/worker";
+import {
+    CURSOR_CODE,
+    LOAD_STATE,
+} from "../../typings/worker";
 import {openFile} from "../../utils/file";
 import ExportLogsButton from "./ExportLogsButton";
 import NavigationBar from "./NavigationBar";
@@ -25,14 +29,16 @@ import "./index.css";
  * @return
  */
 const MenuBar = () => {
-    const {fileName, loadFile} = useContext(StateContext);
+    const {fileName, loadState, loadFile} = useContext(StateContext);
 
     const handleOpenFile = () => {
         openFile((file) => {
             loadFile(file, {code: CURSOR_CODE.LAST_EVENT, args: null});
         });
     };
 
+    const isLoading = LOAD_STATE.LOADING === loadState;
+
     return (
         <>
             <Sheet className={"menu-bar"}>
@@ -72,6 +78,10 @@ const MenuBar = () => {
 
                 <ExportLogsButton/>
             </Sheet>
+            {isLoading &&
+                <LinearProgress
+                    className={"menu-bar-loading-progress"}
+                    size={"sm"}/>}
         </>
     );
 };

new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx

@@ -32,6 +32,7 @@
     LOG_LEVEL_NAMES,
     MAX_LOG_LEVEL,
 } from "../../../typings/logs";
+import {LOAD_STATE} from "../../../typings/worker";
 import {range} from "../../../utils/data";
 import LogLevelChip from "./LogLevelChip";
 
@@ -125,26 +126,30 @@
  * @param props.onClick
  * @return
  */
-const ClearFiltersOption = ({onClick}: ClearFiltersOptionProps) => (
-    <Option
-        value={INVALID_LOG_LEVEL_VALUE}
-        onClick={onClick}
-    >
-        <ListItemDecorator>
-            <CloseIcon/>
-        </ListItemDecorator>
-        Clear filters
-    </Option>
-);
+const ClearFiltersOption = ({onClick}: ClearFiltersOptionProps) => {
+
+    return (
+        <Option
+            value={INVALID_LOG_LEVEL_VALUE}
+            onClick={onClick}
+        >
+            <ListItemDecorator>
+                <CloseIcon/>
+            </ListItemDecorator>
+            Clear filters
+        </Option>
+    );
+};
 
 /**
  * Renders a dropdown box for selecting log levels.
  *
  * @return
  */
 const LogLevelSelect = () => {
+    const {loadState, setLogLevelFilter} = useContext(StateContext);
+
     const [selectedLogLevels, setSelectedLogLevels] = useState<LOG_LEVEL[]>([]);
-    const {setLogLevelFilter} = useContext(StateContext);
 
     const handleRenderValue = (selected: SelectValue<SelectOption<LOG_LEVEL>, true>) => (
         <Box className={"log-level-select-render-value-box"}>
@@ -211,6 +216,7 @@
             size={"sm"}
             value={selectedLogLevels}
             variant={"soft"}
+            disabled = {LOAD_STATE.READY !== loadState}
             indicator={0 === selectedLogLevels.length ?
                 <KeyboardArrowUpIcon/> :
                 <Tooltip title={"Clear filters"}>
@@ -222,7 +228,10 @@
                     </IconButton>
                 </Tooltip>}
             placeholder={
-                <Chip className={"log-level-select-render-value-box-label"}>
+                <Chip
+                    className={"log-level-select-render-value-box-label"}
+                    sx={loadState !== LOAD_STATE.READY ? { color: 'neutral.plainDisabledColor' } : {}}
+                >
                     Log Level
                 </Chip>
             }

new-log-viewer/src/components/StatusBar/index.tsx

@@ -9,6 +9,7 @@ import {
     copyPermalinkToClipboard,
     UrlContext,
 } from "../../contexts/UrlContextProvider";
+import {LOAD_STATE} from "../../typings/worker";
 import LogLevelSelect from "./LogLevelSelect";
 
 import "./index.css";
@@ -27,7 +28,7 @@ const handleCopyLinkButtonClick = () => {
  * @return
  */
 const StatusBar = () => {
-    const {numEvents} = useContext(StateContext);
+    const {loadState, numEvents} = useContext(StateContext);
     const {logEventNum} = useContext(UrlContext);
 
     return (
@@ -40,10 +41,11 @@ const StatusBar = () => {
             </Typography>
             <Button
                 color={"primary"}
+                disabled={loadState !== LOAD_STATE.READY}
                 size={"sm"}
                 variant={"soft"}
                 onClick={handleCopyLinkButtonClick}
-            >
+            > 
                 {"Log Event "}
                 {logEventNum}
                 {" / "}