diff --git a/app/src/App.tsx b/app/src/App.tsx
index a2fab4485..08f003845 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -89,6 +89,7 @@ export default function App() {
   // const [isConnected, setIsConnected] = useState(socket.connected);
   // const [fooEvents, setFooEvents] = useState([]);
 
+  const [connected, setConnected] = useState<boolean>(false);
   const [selectionSchema, setSelectionSchema] = useState({});
   const [modifierSchema, setModifierSchema] = useState({});
   const [sceneSchema, setSceneSchema] = useState({});
@@ -226,6 +227,7 @@ export default function App() {
 
   useEffect(() => {
     function onConnect() {
+      setConnected(true);
       socket.emit(
         "webclient:connect",
         (data: { name: string; room: string; authenticated: boolean }) => {
@@ -277,6 +279,10 @@ export default function App() {
       });
     }
 
+    function onDisconnect() {
+      setConnected(false);
+    }
+
     function onSelectionSchema(receivedSchema: any) {
       setSelectionSchema(receivedSchema);
     }
@@ -373,6 +379,7 @@ export default function App() {
     }
 
     socket.on("connect", onConnect);
+    socket.on("disconnect", onDisconnect);
     socket.on("selection:schema", onSelectionSchema);
     socket.on("modifier:schema", onModifierSchema);
     socket.on("scene:schema", onSceneSchema);
@@ -397,6 +404,7 @@ export default function App() {
 
     return () => {
       socket.off("connect", onConnect);
+      socket.off("disconnect", onDisconnect);
       socket.off("selection:schema", onSelectionSchema);
       socket.off("modifier:schema", onModifierSchema);
       socket.off("scene:schema", onSceneSchema);
@@ -834,6 +842,7 @@ export default function App() {
           setBookmarks={setBookmarks}
           selectedFrames={selectedFrames}
           setSelectedFrames={setSelectedFrames}
+          connected={connected}
         />
         <Plotting
           setStep={setStep}
diff --git a/app/src/components/progressbar.tsx b/app/src/components/progressbar.tsx
index 5f6849fb7..e03052cf9 100644
--- a/app/src/components/progressbar.tsx
+++ b/app/src/components/progressbar.tsx
@@ -249,6 +249,7 @@ interface FrameProgressBarProps {
   bookmarks: any[]; // Replace with actual type if known
   setBookmarks: (bookmarks: any[]) => void; // Replace with actual type if known
   setSelectedFrames: (selectedFrames: IndicesState) => void;
+  connected: boolean;
 }
 
 const FrameProgressBar: React.FC<FrameProgressBarProps> = ({
@@ -259,6 +260,7 @@ const FrameProgressBar: React.FC<FrameProgressBarProps> = ({
   bookmarks,
   setBookmarks,
   setSelectedFrames,
+  connected,
 }) => {
   const [linePosition, setLinePosition] = useState<number>(0);
   const [disabledFrames, setDisabledFrames] = useState<number[]>([]);
@@ -398,6 +400,25 @@ const FrameProgressBar: React.FC<FrameProgressBarProps> = ({
             >
               1
             </Col>
+            {!connected && (
+              <Col
+                className="d-flex bg-body justify-content-center align-items-center user-select-none"
+                style={{ height: 25 }}
+              >
+                <OverlayTrigger
+                  placement="top"
+                  delay={{ show: 0, hide: 100 }}
+                  overlay={<Tooltip>Not connected to server</Tooltip>}
+                >
+                  <div
+                    className="spinner-border spinner-border-sm text-primary"
+                    role="status"
+                  >
+                    <span className="visually-hidden">Loading...</span>
+                  </div>
+                </OverlayTrigger>
+              </Col>
+            )}
           </Row>
         </Col>
       </Row>