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,10 @@ import React, {
 } from "react";
 
 import {StateContext} from "../../contexts/StateContextProvider";
-import {CURSOR_CODE} from "../../typings/worker";
+import {
+    CURSOR_CODE,
+    LOAD_STATE,
+} from "../../typings/worker";
 
 import "./index.css";
 
@@ -21,8 +24,9 @@ interface DropFileContextProviderProps {
  * @return
  */
 const DropFileContainer = ({children}: DropFileContextProviderProps) => {
-    const {loadFile} = useContext(StateContext);
+    const {loadFile, loadState} = useContext(StateContext);
     const [isFileHovering, setIsFileHovering] = useState(false);
+    const isLoading = LOAD_STATE.LOADING_FILE === loadState || LOAD_STATE.EXPORTING === loadState;
 
     const handleDrag = (ev: React.DragEvent<HTMLDivElement>) => {
         ev.preventDefault();
@@ -52,6 +56,9 @@ const DropFileContainer = ({children}: DropFileContextProviderProps) => {
         ev.stopPropagation();
 
         setIsFileHovering(false);
+        if (isLoading) {
+            return;
+        }
 
         const [file] = ev.dataTransfer.files;
         if ("undefined" === typeof file) {
@@ -78,10 +85,14 @@ const DropFileContainer = ({children}: DropFileContextProviderProps) => {
                         onDrop={handleDrop}
                     >
                         <div
-                            className={"hover-message"}
+                            className={`hover-message ${isLoading ?
+                                "hover-message-loading" :
+                                ""}`}
                             onDrop={handleDrop}
                         >
-                            Drop file to view
+                            {isLoading ?
+                                "Drop is disabled during loading" :
+                                "Drop file to view"}
                         </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 {Typography} from "@mui/joy";
 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 @@ const PAGE_NUM_INPUT_FIT_EXTRA_WIDTH = 2;
  * @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,17 @@ const PageNumInput = () => {
         >
             <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_FILE === loadState;
+
     return (
         <>
             <Sheet className={"menu-bar"}>
@@ -52,6 +58,10 @@ const MenuBar = () => {
                 >
                     <IconButton
                         size={"sm"}
+                        disabled={
+                            loadState === LOAD_STATE.LOADING_FILE ||
+                            loadState === LOAD_STATE.EXPORTING
+                        }
                         onClick={handleOpenFile}
                     >
                         <FolderOpenIcon className={"menu-bar-open-file-icon"}/>
@@ -72,6 +82,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 @@ import {
     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,29 @@ interface ClearFiltersOptionProps {
  * @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"}>
@@ -206,6 +210,7 @@ const LogLevelSelect = () => {
     return (
         <Select
             className={"log-level-select"}
+            disabled={LOAD_STATE.READY !== loadState}
             multiple={true}
             renderValue={handleRenderValue}
             size={"sm"}
@@ -222,7 +227,12 @@ const LogLevelSelect = () => {
                     </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 (
@@ -42,6 +43,10 @@ const StatusBar = () => {
                 color={"primary"}
                 size={"sm"}
                 variant={"soft"}
+                disabled={
+                    loadState === LOAD_STATE.UNOPENED ||
+                    loadState === LOAD_STATE.LOADING_FILE
+                }
                 onClick={handleCopyLinkButtonClick}
             >
                 {"Log Event "}