fix(cuesheet): avoid layout shifts when images scroll back into view

The cuesheet is a virtualised table: rows are unmounted once they leave
the viewport, taking the <img> elements with them. On the way back the
image has no dimensions until the browser makes it available, so the row
grows under the user as it loads.

We now remember the aspect ratio of the images we have seen and use it to
reserve the space the image will take. This holds two numbers per image:
the image data itself is left to the browser cache, which is better
placed than us to decide when memory should be released.

Also drops the lazy loading attribute: the row is only mounted when it is
already close to the viewport, so it only adds a gate before the request.

Whether the image is fetched again on scroll back is decided by the cache
headers of the host serving it, and cannot be worked around from here.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CKXcDrZoQXbJpaXiLi1aff

apps/client/package.json

@@ -30,7 +30,7 @@
     "react-fast-compare": "^3.2.2",
     "react-hook-form": "^7.80.0",
     "react-icons": "5.6.0",
-    "react-router": "^8.3.0",
+    "react-router": "^8.0.1",
     "react-virtuoso": "^4.18.7",
     "zustand": "^5.0.14"
   },

apps/client/src/common/components/state/Empty.module.scss

@@ -1,43 +1,20 @@
-@use '@/theme/viewerDefs' as *;
-
 .emptyContainer {
   width: 100%;
   text-align: center;
-  color: var(--secondary-color-override, $viewer-secondary-color);
+  color: $white-10;
 
   .empty {
     display: block;
-    width: min(100%, 14rem);
-    margin: 0 auto -1.5rem;
-    opacity: 0.6;
+    width: min(100%, 24rem);
+    margin-inline: auto;
+    opacity: 0.8;
   }
 
   .text {
     display: block;
     margin-inline: auto;
-    font-weight: 400;
-    font-size: clamp(1rem, 1.55vw, 1.5rem);
-    line-height: 1.35;
-    max-width: min(100%, 40rem);
-  }
-
-  &.error {
-    color: $error-red;
-
-    .empty {
-      opacity: 0.35;
-      filter: grayscale(1);
-    }
-
-    .text {
-      margin-top: 0.5rem;
-    }
-  }
-
-  .errorIcon {
-    display: block;
-    width: 1.5rem;
-    height: 1.5rem;
-    margin: -0.125rem auto 0;
+    font-weight: 600;
+    font-size: 2em;
+    max-width: min(100%, 600px);
   }
 }

apps/client/src/common/components/state/Empty.tsx

@@ -1,5 +1,4 @@
 import { CSSProperties } from 'react';
-import { IoWarningOutline } from 'react-icons/io5';
 
 import EmptyImage from '../../../assets/images/empty.svg?react';
 import { cx } from '../../utils/styleUtils';
@@ -10,18 +9,12 @@ interface EmptyProps {
   text?: string;
   injectedStyles?: CSSProperties;
   className?: string;
-  variant?: 'error';
 }
 
-export default function Empty({ text, className, injectedStyles, variant }: EmptyProps) {
+export default function Empty({ text, className, injectedStyles }: EmptyProps) {
   return (
-    <div
-      className={cx([style.emptyContainer, variant === 'error' && style.error, className])}
-      style={injectedStyles}
-      role={variant === 'error' ? 'alert' : undefined}
-    >
+    <div className={cx([style.emptyContainer, className])} style={injectedStyles}>
       <EmptyImage className={style.empty} />
-      {variant === 'error' && <IoWarningOutline className={style.errorIcon} aria-hidden />}
       {text && <span className={style.text}>{text}</span>}
     </div>
   );

apps/client/src/common/components/state/EmptyFill.module.scss

@@ -1,11 +0,0 @@
-.fill {
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  flex: 1;
-
-  display: grid;
-  place-items: start center;
-  padding: clamp(4rem, 20dvh, 12rem) 1.5rem 1rem;
-}

apps/client/src/common/components/state/EmptyFill.tsx

@@ -1,19 +0,0 @@
-import { cx } from '../../utils/styleUtils';
-import Empty from './Empty';
-
-import style from './EmptyFill.module.scss';
-
-interface EmptyFillProps {
-  text?: string;
-  /** placed on the fill wrapper — e.g. to assign a grid-area in a grid parent */
-  className?: string;
-}
-
-/** Container-filling empty/loading state for panels and grid/flex cells. */
-export default function EmptyFill({ text, className }: EmptyFillProps) {
-  return (
-    <div className={cx([style.fill, className])}>
-      <Empty text={text} />
-    </div>
-  );
-}

apps/client/src/common/components/state/EmptyPage.module.scss

@@ -6,7 +6,7 @@
   box-sizing: border-box; /* reset */
   overflow: hidden;
   width: 100%; /* restrict the page width to viewport */
-  height: 100dvh;
+  height: 100vh;
 
   font-family: var(--font-family-override, $viewer-font-family);
   background: var(--background-color-override, $viewer-background-color);
@@ -16,6 +16,5 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  padding-block: 5rem;
+  padding-top: 5rem;
 }

apps/client/src/common/components/state/EmptyPage.tsx

@@ -7,13 +7,12 @@ import style from './EmptyPage.module.scss';
 interface EmptyPageProps {
   text?: string;
   injectedStyles?: CSSProperties;
-  variant?: 'error';
 }
 
-export default function EmptyPage({ text, injectedStyles, variant }: EmptyPageProps) {
+export default function EmptyPage({ text, injectedStyles }: EmptyPageProps) {
   return (
     <div className={style.page}>
-      <Empty text={text} injectedStyles={injectedStyles} variant={variant} />
+      <Empty text={text} injectedStyles={injectedStyles} />
     </div>
   );
 }

apps/client/src/common/components/state/EmptyTableBody.module.scss

@@ -15,4 +15,9 @@
     gap: 1rem;
     margin-top: 1em;
   }
+
+  .text {
+    font-weight: 600;
+    font-size: 2em;
+  }
 }

apps/client/src/common/components/state/EmptyTableBody.tsx

@@ -18,7 +18,8 @@ export default function EmptyTableBody({ handleAddNew }: EmptyTableBodyProps) {
     <tbody className={style.emptyContainer}>
       <tr>
         <td colSpan={99} className={style.emptyCell}>
-          <Empty text={text} injectedStyles={{ marginTop: '5vh' }} />
+          <Empty injectedStyles={{ marginTop: '5vh' }} />
+          <span className={style.text}>{text}</span>
           {handleAddNew && (
             <div className={style.inline}>
               <Button onClick={() => handleAddNew(SupportedEntry.Event)} variant='primary' size='large'>

apps/client/src/common/utils/__tests__/imageDimensions.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, test } from 'vitest';
+
+import { getRememberedAspectRatio, rememberAspectRatio } from '../imageDimensions';
+
+/** stand-in for a loaded HTMLImageElement */
+function makeImage(naturalWidth: number, naturalHeight: number) {
+  return { naturalWidth, naturalHeight } as HTMLImageElement;
+}
+
+describe('image dimensions', () => {
+  test('remembers the aspect ratio of a loaded image', () => {
+    expect(getRememberedAspectRatio('http://ontime.local/image.png')).toBe(null);
+
+    rememberAspectRatio('http://ontime.local/image.png', makeImage(1920, 1080));
+
+    expect(getRememberedAspectRatio('http://ontime.local/image.png')).toBe(1920 / 1080);
+  });
+
+  test('handles images which have not loaded', () => {
+    rememberAspectRatio('http://ontime.local/broken.png', makeImage(0, 0));
+    expect(getRememberedAspectRatio('http://ontime.local/broken.png')).toBe(null);
+  });
+
+  test('handles missing values', () => {
+    expect(getRememberedAspectRatio(undefined)).toBe(null);
+    expect(getRememberedAspectRatio('')).toBe(null);
+    expect(() => rememberAspectRatio('', makeImage(100, 100))).not.toThrow();
+  });
+
+  test('forgets the least recently used entries', () => {
+    for (let i = 0; i < 600; i++) {
+      rememberAspectRatio(`http://ontime.local/${i}.png`, makeImage(100, 50));
+    }
+
+    expect(getRememberedAspectRatio('http://ontime.local/0.png')).toBe(null);
+    expect(getRememberedAspectRatio('http://ontime.local/599.png')).toBe(2);
+  });
+});

apps/client/src/common/utils/imageDimensions.ts

@@ -0,0 +1,47 @@
+/**
+ * Images in the cuesheet live inside a virtualised table:
+ * rows are unmounted when they leave the viewport and mounted again when they come back.
+ * A re-mounted image has no dimensions until it is available,
+ * which makes the row change height and the table shift under the user.
+ *
+ * We remember the aspect ratio of the images we have already seen
+ * so that we can reserve the space they will take.
+ * This only holds two numbers per image: we leave the image data itself to the browser cache,
+ * which knows better than us when memory should be released.
+ */
+
+/** how many aspect ratios we remember, this is only a few bytes per entry */
+const maxSize = 500;
+
+const aspectRatios = new Map<string, number>();
+
+/**
+ * @returns the aspect ratio of a previously loaded image, if we have seen it before
+ */
+export function getRememberedAspectRatio(src: string | null | undefined): number | null {
+  if (!src) {
+    return null;
+  }
+  return aspectRatios.get(src) ?? null;
+}
+
+/**
+ * Records the aspect ratio of a loaded image
+ */
+export function rememberAspectRatio(src: string | null | undefined, image: HTMLImageElement) {
+  if (!src || image.naturalHeight === 0) {
+    return;
+  }
+
+  // the map iteration order is our LRU queue, re-adding the entry marks it as recently used
+  aspectRatios.delete(src);
+  aspectRatios.set(src, image.naturalWidth / image.naturalHeight);
+
+  while (aspectRatios.size > maxSize) {
+    const oldest = aspectRatios.keys().next();
+    if (oldest.done) {
+      return;
+    }
+    aspectRatios.delete(oldest.value);
+  }
+}

apps/client/src/features/operator/Operator.tsx

@@ -1,7 +1,6 @@
 import { OntimeView, isOntimeEvent, isOntimeGroup } from 'ontime-types';
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import EmptyFill from '../../common/components/state/EmptyFill';
 import EmptyPage from '../../common/components/state/EmptyPage';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
 import useFollowComponent from '../../common/hooks/useFollowComponent';
@@ -11,7 +10,6 @@ import { cx } from '../../common/utils/styleUtils';
 import { throttle } from '../../common/utils/throttle';
 import { getDefaultFormat } from '../../common/utils/time';
 import { isTouchDevice } from '../../externals';
-import { useTranslation } from '../../translation/TranslationProvider';
 import Loader from '../../views/common/loader/Loader';
 import CustomFieldEditModal from './custom-field-edit-modal/CustomFieldEditModal';
 import FollowButton from './follow-button/FollowButton';
@@ -37,7 +35,7 @@ export default function OperatorLoader() {
   }
 
   if (status === 'error') {
-    return <EmptyPage variant='error' text='There was an error fetching data, please refresh the page.' />;
+    return <EmptyPage text='There was an error fetching data, please refresh the page.' />;
   }
 
   return <Operator {...data} />;
@@ -45,7 +43,6 @@ export default function OperatorLoader() {
 
 function Operator({ rundown, rundownMetadata, customFields, settings }: OperatorData) {
   const selectedEventId = useSelectedEventId();
-  const { getLocalizedString } = useTranslation();
   const { subscribe, mainSource, secondarySource, shouldEdit, hidePast, showStart } = useOperatorOptions();
 
   const [showEditPrompt, setShowEditPrompt] = useState(false);
@@ -116,7 +113,6 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
   const operatorOptions = useMemo(() => getOperatorOptions(customFields, defaultFormat), [customFields, defaultFormat]);
 
   const canEdit = shouldEdit && subscribe.length;
-  const hasEvents = rundown.order.length > 0;
 
   return (
     <div className={style.operatorContainer} data-testid='operator-view'>
@@ -131,121 +127,117 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
         </div>
       )}
 
-      {!hasEvents ? (
-        <EmptyFill text={getLocalizedString('common.no_data')} />
-      ) : (
-        <div className={style.operatorEvents} onWheel={handleScroll} onTouchMove={handleScroll} ref={scrollRef}>
-          {rundown.order.map((entryId) => {
-            const entry = rundown.entries[entryId];
-            if (isOntimeEvent(entry)) {
-              const { isPast, isLinkedToLoaded, isLoaded, totalGap } = rundownMetadata[entryId];
-              // hide past events (if setting) and skipped events
-              if ((hidePast && isPast) || entry.skip) {
-                return null;
-              }
+      <div className={style.operatorEvents} onWheel={handleScroll} onTouchMove={handleScroll} ref={scrollRef}>
+        {rundown.order.map((entryId) => {
+          const entry = rundown.entries[entryId];
+          if (isOntimeEvent(entry)) {
+            const { isPast, isLinkedToLoaded, isLoaded, totalGap } = rundownMetadata[entryId];
+            // hide past events (if setting) and skipped events
+            if ((hidePast && isPast) || entry.skip) {
+              return null;
+            }
 
-              const { mainField, secondaryField, subscribedData } = getEventData(
-                entry,
-                mainSource,
-                secondarySource,
-                subscribe,
-                customFields,
-              );
+            const { mainField, secondaryField, subscribedData } = getEventData(
+              entry,
+              mainSource,
+              secondarySource,
+              subscribe,
+              customFields,
+            );
 
-              return (
-                <OperatorEvent
+            return (
+              <OperatorEvent
+                key={entry.id}
+                id={entry.id}
+                colour={entry.colour}
+                cue={entry.cue}
+                main={mainField}
+                secondary={secondaryField}
+                timeStart={entry.timeStart}
+                duration={entry.duration}
+                delay={entry.delay}
+                dayOffset={entry.dayOffset}
+                isLinkedToLoaded={isLinkedToLoaded}
+                isSelected={isLoaded}
+                isPast={isPast}
+                selectedRef={isLoaded ? selectedRef : undefined}
+                showStart={showStart}
+                subscribed={subscribedData}
+                totalGap={totalGap}
+                onLongPress={canEdit ? handleEdit : () => undefined}
+              />
+            );
+          }
+
+          if (isOntimeGroup(entry)) {
+            const { isPast } = rundownMetadata[entry.id];
+
+            const isCurrentParent = selectedEventId ? rundownMetadata[selectedEventId]?.groupId === entry.id : false;
+
+            if (hidePast && isPast && !isCurrentParent) {
+              return null;
+            }
+
+            return (
+              <Fragment key={entry.id}>
+                <OperatorGroup
                   key={entry.id}
-                  id={entry.id}
+                  title={entry.title}
                   colour={entry.colour}
-                  cue={entry.cue}
-                  main={mainField}
-                  secondary={secondaryField}
-                  timeStart={entry.timeStart}
+                  count={entry.entries.length}
                   duration={entry.duration}
-                  delay={entry.delay}
-                  dayOffset={entry.dayOffset}
-                  isLinkedToLoaded={isLinkedToLoaded}
-                  isSelected={isLoaded}
-                  isPast={isPast}
-                  selectedRef={isLoaded ? selectedRef : undefined}
-                  showStart={showStart}
-                  subscribed={subscribedData}
-                  totalGap={totalGap}
-                  onLongPress={canEdit ? handleEdit : () => undefined}
                 />
-              );
-            }
+                {entry.entries.map((nestedEntryId) => {
+                  const nestedEntry = rundown.entries[nestedEntryId];
+                  if (!isOntimeEvent(nestedEntry)) {
+                    return null;
+                  }
 
-            if (isOntimeGroup(entry)) {
-              const { isPast } = rundownMetadata[entry.id];
+                  const { isPast, isLoaded, isLinkedToLoaded, totalGap } = rundownMetadata[nestedEntryId];
 
-              const isCurrentParent = selectedEventId ? rundownMetadata[selectedEventId]?.groupId === entry.id : false;
+                  // hide past events (if setting) and skipped events
+                  if ((hidePast && isPast) || nestedEntry.skip) {
+                    return null;
+                  }
 
-              if (hidePast && isPast && !isCurrentParent) {
-                return null;
-              }
+                  const { mainField, secondaryField, subscribedData } = getEventData(
+                    nestedEntry,
+                    mainSource,
+                    secondarySource,
+                    subscribe,
+                    customFields,
+                  );
 
-              return (
-                <Fragment key={entry.id}>
-                  <OperatorGroup
-                    key={entry.id}
-                    title={entry.title}
-                    colour={entry.colour}
-                    count={entry.entries.length}
-                    duration={entry.duration}
-                  />
-                  {entry.entries.map((nestedEntryId) => {
-                    const nestedEntry = rundown.entries[nestedEntryId];
-                    if (!isOntimeEvent(nestedEntry)) {
-                      return null;
-                    }
-
-                    const { isPast, isLoaded, isLinkedToLoaded, totalGap } = rundownMetadata[nestedEntryId];
-
-                    // hide past events (if setting) and skipped events
-                    if ((hidePast && isPast) || nestedEntry.skip) {
-                      return null;
-                    }
-
-                    const { mainField, secondaryField, subscribedData } = getEventData(
-                      nestedEntry,
-                      mainSource,
-                      secondarySource,
-                      subscribe,
-                      customFields,
-                    );
-
-                    return (
-                      <OperatorEvent
-                        key={nestedEntry.id}
-                        id={nestedEntry.id}
-                        colour={nestedEntry.colour}
-                        cue={nestedEntry.cue}
-                        main={mainField}
-                        secondary={secondaryField}
-                        timeStart={nestedEntry.timeStart}
-                        duration={nestedEntry.duration}
-                        delay={nestedEntry.delay}
-                        dayOffset={nestedEntry.dayOffset}
-                        isLinkedToLoaded={isLinkedToLoaded}
-                        isSelected={isLoaded}
-                        isPast={isPast}
-                        groupColour={entry.colour}
-                        selectedRef={isLoaded ? selectedRef : undefined}
-                        showStart={showStart}
-                        subscribed={subscribedData}
-                        totalGap={totalGap}
-                        onLongPress={canEdit ? handleEdit : () => undefined}
-                      />
-                    );
-                  })}
-                </Fragment>
-              );
-            }
-            return null;
-          })}
-        </div>
-      )}
+                  return (
+                    <OperatorEvent
+                      key={nestedEntry.id}
+                      id={nestedEntry.id}
+                      colour={nestedEntry.colour}
+                      cue={nestedEntry.cue}
+                      main={mainField}
+                      secondary={secondaryField}
+                      timeStart={nestedEntry.timeStart}
+                      duration={nestedEntry.duration}
+                      delay={nestedEntry.delay}
+                      dayOffset={nestedEntry.dayOffset}
+                      isLinkedToLoaded={isLinkedToLoaded}
+                      isSelected={isLoaded}
+                      isPast={isPast}
+                      groupColour={entry.colour}
+                      selectedRef={isLoaded ? selectedRef : undefined}
+                      showStart={showStart}
+                      subscribed={subscribedData}
+                      totalGap={totalGap}
+                      onLongPress={canEdit ? handleEdit : () => undefined}
+                    />
+                  );
+                })}
+              </Fragment>
+            );
+          }
+          return null;
+        })}
+      </div>
       <FollowButton isVisible={lockAutoScroll} onClickHandler={handleOffset} />
     </div>
   );

apps/client/src/features/rundown/RundownList.tsx

@@ -1,24 +1,19 @@
 import { memo } from 'react';
 
-import EmptyFill from '../../common/components/state/EmptyFill';
+import Empty from '../../common/components/state/Empty';
 import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import { useRundownEditor } from '../../common/hooks/useSocket';
-import { useTranslation } from '../../translation/TranslationProvider';
 import Rundown from './Rundown';
 
 export default memo(RundownList);
 function RundownList() {
   const { data, status, rundownMetadata } = useRundownWithMetadata();
   const featureData = useRundownEditor();
-  const { getLocalizedString } = useTranslation();
 
-  // avoid showing the editable empty state before we know whether the rundown is actually empty
-  if (status === 'pending') {
-    return <EmptyFill text='Loading…' />;
-  }
+  const isLoading = status !== 'success' || !data || !rundownMetadata;
 
-  if (status === 'error') {
-    return <EmptyFill text={getLocalizedString('common.no_data')} />;
+  if (isLoading) {
+    return <Empty text='Connecting to server' />;
   }
 
   return (

apps/client/src/features/rundown/rundown-table/RundownTable.tsx

@@ -1,5 +1,6 @@
 import { memo, useEffect, useMemo } from 'react';
 
+import EmptyPage from '../../../common/components/state/EmptyPage';
 import { EntryActionsProvider } from '../../../common/context/EntryActionsContext';
 import useCustomFields from '../../../common/hooks-query/useCustomFields';
 import { useLoadedRundownSource } from '../../../common/hooks-query/useScopedRundown';
@@ -12,7 +13,7 @@ import { makeRundownColumns } from './makeRundownColumns';
 
 export default memo(RundownTable);
 function RundownTable() {
-  const { data: customFields } = useCustomFields();
+  const { data: customFields, status: customFieldStatus } = useCustomFields();
   const setPermissions = useCuesheetPermissions((state) => state.setPermissions);
   const { editorMode } = useEditorFollowMode();
   const source = useLoadedRundownSource();
@@ -31,10 +32,16 @@ function RundownTable() {
 
   const columns = useMemo(() => makeRundownColumns(customFields), [customFields]);
 
+  const isLoading = !customFields || customFieldStatus === 'pending';
+
   return (
     <EntryActionsProvider actions={actions}>
       <CuesheetDnd columns={columns} tableRoot='editor'>
-        <CuesheetTable columns={columns} source={source} cuesheetMode={editorMode} tableRoot='editor' />
+        {isLoading ? (
+          <EmptyPage text='Loading...' />
+        ) : (
+          <CuesheetTable columns={columns} source={source} cuesheetMode={editorMode} tableRoot='editor' />
+        )}
       </CuesheetDnd>
     </EntryActionsProvider>
   );

apps/client/src/views/backstage/Backstage.tsx

@@ -35,7 +35,7 @@ export default function BackstageLoader() {
   }
 
   if (status === 'error') {
-    return <EmptyPage variant='error' text='There was an error fetching data, please refresh the page.' />;
+    return <EmptyPage text='There was an error fetching data, please refresh the page.' />;
   }
 
   return <Backstage {...data} />;

apps/client/src/views/common/loader/Loader.module.scss

@@ -7,7 +7,7 @@ $dot-spacing: 1.5rem;
   display: grid;
   place-items: center;
   background-color: var(--background-color-override, $viewer-background-color);
-  height: 100dvh;
+  height: 100vh;
 }
 
 .ellipsis {
@@ -21,26 +21,26 @@ $dot-spacing: 1.5rem;
     height: $dot-size;
     border-radius: 50%;
     background-color: var(--accent-color-override, $ontime-color);
-    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
 
     &:nth-child(1) {
       left: $dot-size;
-      animation: lds-ellipsis1 1s infinite;
+      animation: lds-ellipsis1 0.6s infinite;
     }
 
     &:nth-child(2) {
       left: $dot-size;
-      animation: lds-ellipsis2 1s infinite;
+      animation: lds-ellipsis2 0.6s infinite;
     }
 
     &:nth-child(3) {
       left: calc($dot-size + $dot-spacing);
-      animation: lds-ellipsis2 1s infinite;
+      animation: lds-ellipsis2 0.6s infinite;
     }
 
     &:nth-child(4) {
       left: calc($dot-size + 2 * $dot-spacing);
-      animation: lds-ellipsis3 1s infinite;
+      animation: lds-ellipsis3 0.6s infinite;
     }
   }
 }

apps/client/src/views/countdown/Countdown.scss

@@ -80,7 +80,21 @@ $item-height: 3.5rem;
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 1.5rem;
+
+    button {
+      margin-top: 1.75rem;
+    }
+  }
+
+  .empty-state__content {
+    max-width: none;
+
+    span {
+      max-width: none;
+      white-space: nowrap;
+      font-size: clamp(1.5rem, 4vw, 2.25rem);
+      line-height: 1.1;
+    }
   }
 
   .list-container {

apps/client/src/views/countdown/Countdown.tsx

@@ -43,7 +43,7 @@ export default function CountdownLoader() {
   }
 
   if (status === 'error') {
-    return <EmptyPage variant='error' text='There was an error fetching data, please refresh the page.' />;
+    return <EmptyPage text='There was an error fetching data, please refresh the page.' />;
   }
 
   return <Countdown {...data} />;
@@ -87,7 +87,7 @@ function Countdown({ customFields, rundownData, projectData, isMirrored, setting
 
       {!hasEvents && (
         <div className='empty-state'>
-          <Empty text={getLocalizedString('common.no_data')} />
+          <Empty text={getLocalizedString('common.no_data')} className='empty-state__content' />
         </div>
       )}
 
@@ -121,7 +121,7 @@ function CountdownContents({ candidates, rundownData, subscriptions, goToEditMod
   if (subscriptions.length === 0) {
     return (
       <div className='empty-state'>
-        <Empty text={getLocalizedString('countdown.select_event')} />
+        <Empty text={getLocalizedString('countdown.select_event')} className='empty-state__content' />
         <Button variant='primary' size='xlarge' onClick={goToEditMode}>
           <IoAdd /> Add
         </Button>
@@ -137,7 +137,7 @@ function CountdownContents({ candidates, rundownData, subscriptions, goToEditMod
   if (subscribedEvents.length === 0) {
     return (
       <div className='empty-state'>
-        <Empty text={getLocalizedString('countdown.select_event')} />
+        <Empty text={getLocalizedString('countdown.select_event')} className='empty-state__content' />
         <Button variant='primary' size='xlarge' onClick={goToEditMode}>
           <IoAdd /> Add
         </Button>
@@ -154,7 +154,7 @@ function CountdownContents({ candidates, rundownData, subscriptions, goToEditMod
   if (eventsToShow.length === 0) {
     return (
       <div className='empty-state'>
-        <Empty text={getLocalizedString('countdown.all_have_finished')} />
+        <Empty text={getLocalizedString('countdown.all_have_finished')} className='empty-state__content' />
       </div>
     );
   }

apps/client/src/views/cuesheet/CuesheetTableWrapper.tsx

@@ -2,6 +2,7 @@ import { MaybeString, ProjectRundown } from 'ontime-types';
 import { memo, use, useMemo } from 'react';
 
 import Select from '../../common/components/select/Select';
+import EmptyPage from '../../common/components/state/EmptyPage';
 import { PresetContext } from '../../common/context/PresetContext';
 import useCustomFields from '../../common/hooks-query/useCustomFields';
 import type { RundownSource } from '../../common/hooks-query/useScopedRundown';
@@ -33,34 +34,40 @@ function CuesheetTableWrapper({
   const preset = use(PresetContext);
   const isCurrentRundown = source.rundownId !== null && source.rundownId === loadedRundownId;
   const { cuesheetMode, setCuesheetMode } = useApplyCuesheetPolicy(preset, { canRunMode: isCurrentRundown });
-  const { data: customFields } = useCustomFields();
+  const { data: customFields, status: customFieldStatus } = useCustomFields();
 
   const columns = useMemo(
     () => makeCuesheetColumns(customFields, cuesheetMode, preset),
     [customFields, cuesheetMode, preset],
   );
 
+  const isLoading = !customFields || customFieldStatus === 'pending';
+
   return (
     <CuesheetDnd columns={columns}>
-      <CuesheetTable
-        columns={columns}
-        source={source}
-        cuesheetMode={cuesheetMode}
-        tableRoot='cuesheet'
-        setCuesheetMode={setCuesheetMode}
-        isCurrentRundown={isCurrentRundown}
-        insertElement={
-          <>
-            <RundownSelect
-              cuesheetMode={cuesheetMode}
-              selectedRundownId={selectedRundownId}
-              loadedRundownId={loadedRundownId}
-              setSelectedRundownId={setSelectedRundownId}
-              projectRundowns={projectRundowns}
-            />
-          </>
-        }
-      />
+      {isLoading ? (
+        <EmptyPage text='Loading...' />
+      ) : (
+        <CuesheetTable
+          columns={columns}
+          source={source}
+          cuesheetMode={cuesheetMode}
+          tableRoot='cuesheet'
+          setCuesheetMode={setCuesheetMode}
+          isCurrentRundown={isCurrentRundown}
+          insertElement={
+            <>
+              <RundownSelect
+                cuesheetMode={cuesheetMode}
+                selectedRundownId={selectedRundownId}
+                loadedRundownId={loadedRundownId}
+                setSelectedRundownId={setSelectedRundownId}
+                projectRundowns={projectRundowns}
+              />
+            </>
+          }
+        />
+      )}
     </CuesheetDnd>
   );
 }

apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.module.scss

@@ -5,10 +5,6 @@ $table-header-font-size: calc(1rem - 2px);
 
 @include rows.cuesheet-row-columns($table-header-font-size);
 
-.tableLoading {
-  grid-area: table;
-}
-
 .cuesheet {
   font-size: $table-font-size;
   font-weight: 400;

apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx

@@ -11,7 +11,7 @@ import {
   TableVirtuosoHandle,
 } from 'react-virtuoso';
 
-import EmptyFill from '../../../common/components/state/EmptyFill';
+import EmptyPage from '../../../common/components/state/EmptyPage';
 import EmptyTableBody from '../../../common/components/state/EmptyTableBody';
 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
 import type { RundownSource } from '../../../common/hooks-query/useScopedRundown';
@@ -19,7 +19,6 @@ import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { usePersistedRundownOptions } from '../../../features/rundown/rundown.options';
 import { useEventSelection } from '../../../features/rundown/useEventSelection';
 import { AppMode } from '../../../ontimeConfig';
-import { useTranslation } from '../../../translation/TranslationProvider';
 import { usePersistedCuesheetOptions } from '../cuesheet.options';
 import { useCuesheetPermissions } from '../useTablePermissions';
 import { CuesheetHeader, SortableCuesheetHeader } from './cuesheet-table-elements/CuesheetHeader';
@@ -65,7 +64,6 @@ export default function CuesheetTable({
 }: CuesheetTableProps) {
   const { flatRundown, status, selectedEventId } = source;
   const { updateEntry, updateTimer, addEntry } = useEntryActionsContext();
-  const { getLocalizedString } = useTranslation();
   const canCreateEntries = useCuesheetPermissions((state) => state.canCreateEntries) && cuesheetMode === AppMode.Edit;
 
   const useOptions = tableRoot === 'editor' ? usePersistedRundownOptions : usePersistedCuesheetOptions;
@@ -230,13 +228,10 @@ export default function CuesheetTable({
     });
   }, [cuesheetMode, hideIndexColumn, table]);
 
-  // avoid showing the editable empty state before we know whether the rundown is actually empty
-  if (status === 'pending') {
-    return <EmptyFill text='Loading…' className={style.tableLoading} />;
-  }
+  const isLoading = !flatRundown || status === 'pending';
 
-  if (status === 'error') {
-    return <EmptyFill text={getLocalizedString('common.no_data')} className={style.tableLoading} />;
+  if (isLoading) {
+    return <EmptyPage text='Loading...' />;
   }
 
   return (

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.tsx

@@ -1,7 +1,8 @@
-import { memo } from 'react';
+import { memo, useState } from 'react';
 
 import Button from '../../../../common/components/buttons/Button';
 import Input from '../../../../common/components/input/input/Input';
+import { getRememberedAspectRatio, rememberAspectRatio } from '../../../../common/utils/imageDimensions';
 
 import style from './EditableImage.module.scss';
 
@@ -14,6 +15,14 @@ interface EditableImageProps {
 export default memo(EditableImage);
 
 function EditableImage({ initialValue, readOnly, updateValue }: EditableImageProps) {
+  const [isLoaded, setIsLoaded] = useState(false);
+  /**
+   * The cuesheet is virtualised: rows are unmounted once they leave the viewport.
+   * When the row comes back, we reserve the space the image took
+   * so that the table does not shift while the browser makes it available.
+   */
+  const knownAspectRatio = getRememberedAspectRatio(initialValue);
+
   const handleUpdate = (newValue: string) => {
     if (newValue === initialValue) {
       return;
@@ -62,7 +71,17 @@ function EditableImage({ initialValue, readOnly, updateValue }: EditableImagePro
           </Button>
         </div>
       )}
-      {Boolean(initialValue) && <img loading='lazy' src={initialValue} className={style.image} />}
+      <img
+        src={initialValue}
+        alt=''
+        className={style.image}
+        onLoad={(event) => {
+          rememberAspectRatio(initialValue, event.currentTarget);
+          setIsLoaded(true);
+        }}
+        /** until the image is available, we reserve the space it took the last time we saw it */
+        style={!isLoaded && knownAspectRatio !== null ? { aspectRatio: knownAspectRatio, width: '100%' } : undefined}
+      />
     </div>
   );
 }

apps/client/src/views/project-info/ProjectInfo.scss

@@ -1,7 +1,5 @@
 @use '@/theme/viewerDefs' as *;
 
-$content-width: min(100%, 1100px);
-
 .project {
   margin: 0;
   box-sizing: border-box; /* reset */
@@ -18,104 +16,56 @@ $content-width: min(100%, 1100px);
   display: flex;
   flex-direction: column;
 
-  /* =================== HEADER ===================*/
-
-  .project-header {
-    width: $content-width;
-    margin-inline: auto;
-
-    display: flex;
-    align-items: center;
-    gap: clamp(12px, 2vw, 24px);
-
-    padding-bottom: $view-element-gap;
-    border-bottom: 1px solid $white-10;
-  }
-
   .logo {
     max-width: min(200px, 30vw);
   }
 
-  .title {
-    font-size: $header-font-size;
-    font-weight: 600;
-    line-height: 1.1em;
-  }
-
-  .description {
-    font-size: $base-font-size;
-    color: var(--secondary-color-override, $viewer-secondary-color);
-  }
-
-  /* =================== CONTENT ===================*/
-
   .info {
     flex: 1;
-    width: $content-width;
+    max-height: 100%;
     margin-inline: auto;
     overflow-y: auto;
-
+    width: min(calc(100vw - 4rem), 960px);
     display: flex;
     flex-direction: column;
+    align-items: start;
     gap: $view-element-gap;
 
-    padding-block: $view-element-gap;
     padding-bottom: 10vh;
   }
 
-  .info__card {
-    background-color: var(--card-background-color-override, $viewer-card-bg-color);
-    border-radius: $element-border-radius;
-    padding: $view-block-padding $view-inline-padding;
-
-    display: flex;
-    flex-direction: column;
-    gap: 0.35em;
-  }
-
-  .info__media {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    gap: $view-element-gap;
-  }
-
-  .info__media .info__value {
-    flex: 1;
-    min-width: 0;
-  }
-
   .info__label {
-    font-size: $timer-label-size;
     font-weight: 600;
-    letter-spacing: 0.05em;
     color: var(--label-color-override, $viewer-label-color);
     text-transform: uppercase;
   }
 
   .info__value {
     white-space: break-spaces;
-    line-height: 1.35;
-    overflow-wrap: anywhere;
+  }
+
+  .info__custom {
+    display: flex;
+    gap: 1rem;
   }
 
   .info__image-container {
     display: flex;
     justify-content: center;
     align-items: center;
-    flex: 0 0 min(192px, 25%);
+    width: 192px;
+    height: 192px;
   }
 
   .info__image {
-    display: block;
     max-width: 100%;
-    height: auto;
+    max-height: 100%;
     object-fit: contain;
   }
 
   .link.info__value {
-    display: inline-flex;
-    gap: 0.35em;
+    display: flex;
+    gap: $view-element-gap;
     align-items: center;
     color: $action-text-color;
 
@@ -128,13 +78,12 @@ $content-width: min(100%, 1100px);
 /* =================== MOBILE ===================*/
 @media screen and (max-width: 768px) {
   .project {
-    .project-header {
-      flex-direction: column;
-      align-items: start;
-      gap: 0.5rem;
-    }
     .logo img {
       height: min(50px, 10vh);
     }
+    .info__image-container {
+      width: 96px;
+      height: 96px;
+    }
   }
 }

apps/client/src/views/project-info/ProjectInfo.tsx

@@ -1,5 +1,4 @@
 import { OntimeView } from 'ontime-types';
-import { type ReactNode, useState } from 'react';
 import { IoOpenOutline } from 'react-icons/io5';
 
 import EmptyPage from '../../common/components/state/EmptyPage';
@@ -22,7 +21,7 @@ export default function ProjectInfoLoader() {
   }
 
   if (status === 'error') {
-    return <EmptyPage variant='error' text='There was an error fetching data, please refresh the page.' />;
+    return <EmptyPage text='There was an error fetching data, please refresh the page.' />;
   }
 
   return <ProjectInfo {...data} />;
@@ -42,49 +41,56 @@ function ProjectInfo({ projectData, isMirrored }: ProjectInfoData) {
     return (
       <>
         <ViewParamsEditor target={OntimeView.ProjectInfo} viewOptions={[]} />
-        <EmptyPage text={getLocalizedString('common.no_data')} />
+        <EmptyPage text={getLocalizedString('common.no_data')} />;
       </>
     );
   }
 
-  const hasHeader = Boolean(projectData.logo || projectData.title || projectData.description);
-
   return (
     <div className={`project ${isMirrored ? 'mirror' : ''}`} data-testid='project-view'>
       <ViewParamsEditor target={OntimeView.ProjectInfo} viewOptions={[]} />
-      {hasHeader && (
-        <div className='project-header'>
-          {projectData.logo && <ViewLogo name={projectData.logo} className='logo' />}
-          <div className='project-header__text'>
-            {projectData.title && <div className='title'>{projectData.title}</div>}
-            {projectData.description && <div className='description'>{projectData.description}</div>}
-          </div>
-        </div>
-      )}
+      {projectData.logo && <ViewLogo name={projectData.logo} className='logo' />}
       <div className='info'>
-        {projectData.info && <InfoCard label={getLocalizedString('project.info')}>{projectData.info}</InfoCard>}
+        {projectData.title && (
+          <div>
+            <div className='info__label'>{getLocalizedString('project.title')}</div>
+            <div className='info__value'>{projectData.title}</div>
+          </div>
+        )}
+        {projectData.description && (
+          <div>
+            <div className='info__label'>{getLocalizedString('project.description')}</div>
+            <div className='info__value'>{projectData.description}</div>
+          </div>
+        )}
+        {projectData.info && (
+          <div>
+            <div className='info__label'>{getLocalizedString('project.info')}</div>
+            <div className='info__value'>{projectData.info}</div>
+          </div>
+        )}
         {projectData.url && (
-          <div className='info__card'>
+          <div>
             <div className='info__label'>{getLocalizedString('project.url')}</div>
             <a href={projectData.url} target='_blank' rel='noreferrer' className='info__value link'>
-              {projectData.url}
-              <IoOpenOutline style={{ fontSize: '1em' }} />
+              {projectData.url} <IoOpenOutline style={{ fontSize: '1em' }} />
             </a>
           </div>
         )}
         {projectData.custom.map((info, idx) => {
+          const hasUrl = Boolean(info.url);
           return (
             // oxlint-disable-next-line react/no-array-index-key - we only have the index to go of  here
-            <div key={`${info.title}-${idx}`} className='info__card'>
-              {info.title && <div className='info__label'>{info.title}</div>}
-              {info.url ? (
-                <div className='info__media'>
-                  <InfoImage src={info.url} />
-                  {info.value && <div className='info__value'>{info.value}</div>}
+            <div key={`${info.title}-${idx}`} className='info__custom'>
+              {hasUrl && (
+                <div className='info__image-container'>
+                  <img className='info__image' src={info.url} loading='lazy' />
                 </div>
-              ) : (
-                info.value && <div className='info__value'>{info.value}</div>
               )}
+              <div>
+                <div className='info__label'>{info.title}</div>
+                <div className='info__value'>{info.value}</div>
+              </div>
             </div>
           );
         })}
@@ -92,31 +98,3 @@ function ProjectInfo({ projectData, isMirrored }: ProjectInfoData) {
     </div>
   );
 }
-
-interface InfoCardProps {
-  label: string;
-  children: ReactNode;
-}
-
-function InfoCard({ label, children }: InfoCardProps) {
-  return (
-    <div className='info__card'>
-      <div className='info__label'>{label}</div>
-      <div className='info__value'>{children}</div>
-    </div>
-  );
-}
-
-function InfoImage({ src }: { src: string }) {
-  const [hasError, setHasError] = useState(false);
-
-  if (hasError) {
-    return null;
-  }
-
-  return (
-    <div className='info__image-container'>
-      <img className='info__image' src={src} loading='lazy' alt='' onError={() => setHasError(true)} />
-    </div>
-  );
-}

apps/client/src/views/studio/Studio.tsx

@@ -25,7 +25,7 @@ export default function StudioLoader() {
   }
 
   if (status === 'error') {
-    return <EmptyPage variant='error' text='There was an error fetching data, please refresh the page.' />;
+    return <EmptyPage text='There was an error fetching data, please refresh the page.' />;
   }
 
   return <Studio {...data} />;

apps/client/src/views/timeline/TimelinePage.tsx

@@ -1,7 +1,6 @@
 import { OntimeView } from 'ontime-types';
 import { useMemo } from 'react';
 
-import EmptyFill from '../../common/components/state/EmptyFill';
 import EmptyPage from '../../common/components/state/EmptyPage';
 import ViewLogo from '../../common/components/view-logo/ViewLogo';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
@@ -30,7 +29,7 @@ export default function TimelinePageLoader() {
   }
 
   if (status === 'error') {
-    return <EmptyPage variant='error' text='There was an error fetching data, please refresh the page.' />;
+    return <EmptyPage text='There was an error fetching data, please refresh the page.' />;
   }
 
   return <TimelinePage {...data} />;
@@ -74,7 +73,7 @@ function TimelinePage({ events, customFields, projectData, settings }: TimelineD
           totalDuration={totalDuration}
         />
       ) : (
-        <EmptyFill text={getLocalizedString('common.no_data')} />
+        <EmptyPage text={getLocalizedString('common.no_data')} />
       )}
     </div>
   );

apps/client/src/views/timer/Timer.tsx

@@ -43,7 +43,7 @@ export default function TimerLoader() {
   }
 
   if (status === 'error') {
-    return <EmptyPage variant='error' text='There was an error fetching data, please refresh the page.' />;
+    return <EmptyPage text='There was an error fetching data, please refresh the page.' />;
   }
 
   return <Timer {...data} />;

pnpm-lock.yaml

@@ -137,8 +137,8 @@ importers:
         specifier: 5.6.0
         version: 5.6.0(react@19.2.7)
       react-router:
-        specifier: ^8.3.0
-        version: 8.3.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+        specifier: ^8.0.1
+        version: 8.0.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       react-virtuoso:
         specifier: ^4.18.7
         version: 4.18.7(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
@@ -1508,9 +1508,6 @@ packages:
   '@jridgewell/trace-mapping@0.3.30':
     resolution: {integrity: sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==}
 
-  '@jridgewell/trace-mapping@0.3.31':
-    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
-
   '@lezer/common@1.5.1':
     resolution: {integrity: sha512-6YRVG9vBkaY7p1IVxL4s44n5nUnaNnGM2/AckNgYOnxTG2kWh1vR8BMxPseWPjRNpb5VtXnMpeYAEAADoRV1Iw==}
 
@@ -2975,8 +2972,8 @@ packages:
     resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
     engines: {node: '>= 0.6'}
 
-  acorn@8.18.0:
-    resolution: {integrity: sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==}
+  acorn@8.16.0:
+    resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
     engines: {node: '>=0.4.0'}
     hasBin: true
 
@@ -3729,10 +3726,6 @@ packages:
     resolution: {integrity: sha512-CTXd6rk/M3/ULNQj8FBqBWHYBVYybQ3VPBw0xGKFe3tuH7ytT6ACnvzpIQ3UZtB8yvUKC2cXn1a+x+5EVQLovA==}
     engines: {node: '>=14.14'}
 
-  fs-extra@11.4.0:
-    resolution: {integrity: sha512-EQsFzMUJkCKGr1ePqlYADkIUmHW1s3ZXr5Yqy6wbGrfUCphpl2maM/kyOIRA2HpP3AaFQTZXD4ldjek+nccddA==}
-    engines: {node: '>=14.14'}
-
   fs-extra@7.0.1:
     resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
     engines: {node: '>=6 <7 || >=8'}
@@ -4056,9 +4049,6 @@ packages:
   jsonfile@6.2.0:
     resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
 
-  jsonfile@6.2.1:
-    resolution: {integrity: sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==}
-
   jwa@2.0.0:
     resolution: {integrity: sha512-jrZ2Qx916EA+fq9cEAeCROWPTfCwi1IVHqT2tapuqLEVVDKFDENFw1oL+MwrTvH6msKxsd1YTDVw6uKEcsrLEA==}
 
@@ -4605,8 +4595,8 @@ packages:
     resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
     engines: {node: '>=0.10.0'}
 
-  react-router@8.3.0:
-    resolution: {integrity: sha512-qyPMvW83jGIct3yiieisxdk9M745anqhpIMKN5m1t6yBMfgVPpt77aHOqs5fUlEJRMCGffg9BaQLH9oPVOL7xQ==}
+  react-router@8.0.1:
+    resolution: {integrity: sha512-5EL/fANovVUhRK50NLS8RYfX0BxrimoKsHWUPPy8v5UEl8i6vzF7e4POo3u+AhPItDwccUAJjMfIOmydxBJmQw==}
     engines: {node: '>=22.22.0'}
     peerDependencies:
       react: '>=19.2.7'
@@ -6313,7 +6303,7 @@ snapshots:
     dependencies:
       cross-dirname: 0.1.0
       debug: 4.4.3
-      fs-extra: 11.4.0
+      fs-extra: 11.3.4
       minimist: 1.2.8
       postject: 1.0.0-alpha.6
     transitivePeerDependencies:
@@ -6637,7 +6627,7 @@ snapshots:
   '@jridgewell/source-map@0.3.11':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
+      '@jridgewell/trace-mapping': 0.3.30
 
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
@@ -6646,11 +6636,6 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@jridgewell/trace-mapping@0.3.31':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.5
-
   '@lezer/common@1.5.1': {}
 
   '@lezer/css@1.3.3':
@@ -7756,7 +7741,7 @@ snapshots:
       mime-types: 3.0.1
       negotiator: 1.0.0
 
-  acorn@8.18.0: {}
+  acorn@8.16.0: {}
 
   adler-32@1.3.1: {}
 
@@ -8659,13 +8644,6 @@ snapshots:
       jsonfile: 6.2.0
       universalify: 2.0.1
 
-  fs-extra@11.4.0:
-    dependencies:
-      graceful-fs: 4.2.11
-      jsonfile: 6.2.1
-      universalify: 2.0.1
-    optional: true
-
   fs-extra@7.0.1:
     dependencies:
       graceful-fs: 4.2.11
@@ -9047,13 +9025,6 @@ snapshots:
     optionalDependencies:
       graceful-fs: 4.2.11
 
-  jsonfile@6.2.1:
-    dependencies:
-      universalify: 2.0.1
-    optionalDependencies:
-      graceful-fs: 4.2.11
-    optional: true
-
   jwa@2.0.0:
     dependencies:
       buffer-equal-constant-time: 1.0.1
@@ -9541,7 +9512,7 @@ snapshots:
 
   react-refresh@0.18.0: {}
 
-  react-router@8.3.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
+  react-router@8.0.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
     dependencies:
       cookie-es: 3.1.1
       react: 19.2.7
@@ -9957,7 +9928,7 @@ snapshots:
   terser@5.46.2:
     dependencies:
       '@jridgewell/source-map': 0.3.11
-      acorn: 8.18.0
+      acorn: 8.16.0
       commander: 2.20.3
       source-map-support: 0.5.21