diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json
index 4ee3ba3812..c269736b82 100644
--- a/services/web/frontend/extracted-translations.json
+++ b/services/web/frontend/extracted-translations.json
@@ -205,6 +205,7 @@
"back_to_subscription": "",
"back_to_your_projects": "",
"basic_compile_time": "",
+ "been_offline_changes_saved_in_browser": "",
"before_you_use_error_assistant": "",
"beta_program_already_participating": "",
"beta_program_benefits": "",
@@ -585,6 +586,7 @@
"editing": "",
"editing_captions": "",
"editing_mode": "",
+ "editing_paused": "",
"editor": "",
"editor_disconected_click_to_reconnect": "",
"editor_font_family": "",
diff --git a/services/web/frontend/fonts/material-symbols/MaterialSymbolsRoundedUnfilledPartialSlice.woff2 b/services/web/frontend/fonts/material-symbols/MaterialSymbolsRoundedUnfilledPartialSlice.woff2
index f0e81debcd..0c1bed5eb3 100644
Binary files a/services/web/frontend/fonts/material-symbols/MaterialSymbolsRoundedUnfilledPartialSlice.woff2 and b/services/web/frontend/fonts/material-symbols/MaterialSymbolsRoundedUnfilledPartialSlice.woff2 differ
diff --git a/services/web/frontend/fonts/material-symbols/unfilled-symbols.mjs b/services/web/frontend/fonts/material-symbols/unfilled-symbols.mjs
index f905407cbd..cd75514c59 100644
--- a/services/web/frontend/fonts/material-symbols/unfilled-symbols.mjs
+++ b/services/web/frontend/fonts/material-symbols/unfilled-symbols.mjs
@@ -53,6 +53,7 @@ export default /** @type {const} */ ([
'notifications',
'open_in_new',
'password',
+ 'pause_circle',
'person',
'person_edit',
'picture_as_pdf',
diff --git a/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx b/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx
index a358f2c821..c96151d547 100644
--- a/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx
+++ b/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx
@@ -5,6 +5,7 @@ import PdfPreview from '@/features/pdf-preview/components/pdf-preview'
import { RailLayout } from '../rail/rail'
import { Toolbar } from '../toolbar/toolbar'
import { HorizontalToggler } from '@/features/ide-react/components/resize/horizontal-toggler'
+import { EditingPausedBanner } from '../toolbar/editing-paused-banner'
import { useTranslation } from 'react-i18next'
import { usePdfPane } from '@/features/ide-react/hooks/use-pdf-pane'
import { useLayoutContext } from '@/shared/context/layout-context'
@@ -46,6 +47,7 @@ export default function MainLayout() {
return (
+
{
+ const { t } = useTranslation()
+ const intermittentConnectionImprovementsEnabled = useFeatureFlag(
+ 'intermittent-connection-improvements'
+ )
+ const { outOfSync } = useIdeReactContext()
+ const { isLocked } = useUnsavedDocsContext()
+
+ if (!intermittentConnectionImprovementsEnabled || (!isLocked && !outOfSync)) {
+ return null
+ }
+
+ return (
+
+
+
+ {t('editing_paused')}{' '}
+ {t('been_offline_changes_saved_in_browser')}
+
+
+ )
+}
diff --git a/services/web/frontend/js/features/ide-react/context/editor-manager-context.tsx b/services/web/frontend/js/features/ide-react/context/editor-manager-context.tsx
index ffc00091d4..a46026645f 100644
--- a/services/web/frontend/js/features/ide-react/context/editor-manager-context.tsx
+++ b/services/web/frontend/js/features/ide-react/context/editor-manager-context.tsx
@@ -35,6 +35,7 @@ import { useDebugDiffTracker } from '../hooks/use-debug-diff-tracker'
import { convertFileRefToBinaryFile } from '@/features/ide-react/util/file-view'
import { useEditorOpenDocContext } from '@/features/ide-react/context/editor-open-doc-context'
import { useEditorPropertiesContext } from '@/features/ide-react/context/editor-properties-context'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
export interface GotoOffsetOptions {
gotoOffset: number
@@ -118,6 +119,9 @@ export const EditorManagerProvider: FC = ({
projectId,
currentDocument
)
+ const improvedFlakyConnections = useFeatureFlag(
+ 'intermittent-connection-improvements'
+ )
const [globalEditorWatchdogManager] = useState(
() =>
@@ -573,7 +577,9 @@ export const EditorManagerProvider: FC = ({
// Ensure that the editor is locked
setOutOfSync(true)
// Display the "out of sync" modal
- showOutOfSyncModal(editorContent || '')
+ if (!improvedFlakyConnections) {
+ showOutOfSyncModal(editorContent || '')
+ }
// Do not forceReopen the document.
return
@@ -601,6 +607,7 @@ export const EditorManagerProvider: FC = ({
showOutOfSyncModal,
setOutOfSync,
t,
+ improvedFlakyConnections,
])
useEventListener(
diff --git a/services/web/frontend/stylesheets/pages/editor/ide-redesign.scss b/services/web/frontend/stylesheets/pages/editor/ide-redesign.scss
index cc863ee359..8d22b44f15 100644
--- a/services/web/frontend/stylesheets/pages/editor/ide-redesign.scss
+++ b/services/web/frontend/stylesheets/pages/editor/ide-redesign.scss
@@ -3,6 +3,7 @@
--ide-redesign-color: var(--content-primary-dark);
--ide-redesign-resizing-background: var(--bg-dark-primary);
--ide-redesign-color-scheme: dark;
+ --editing-paused-banner-background: var(--bg-dark-tertiary);
}
@include theme('light') {
@@ -10,6 +11,7 @@
--ide-redesign-color: var(--content-primary);
--ide-redesign-resizing-background: var(--white);
--ide-redesign-color-scheme: light;
+ --editing-paused-banner-background: var(--blue-10);
}
.ide-redesign-body {
@@ -32,6 +34,19 @@
}
}
+.editing-paused-banner {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--spacing-04);
+ padding: var(--spacing-04) 0;
+ background-color: var(--editing-paused-banner-background);
+ color: var(--content-primary-themed);
+ border-bottom: 1px solid var(--redesign-toolbar-border-divider);
+ font-size: var(--font-size-03);
+ line-height: var(--line-height-03);
+}
+
.ide-skeleton-block {
border: 1px solid grey;
background-color: white;
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index a8e3df9086..9db1426e86 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -268,6 +268,7 @@
"basic_compile_time": "Basic compile time",
"basic_compile_timeout": "Basic compile timeout",
"basic_compile_timeout_on_fast_servers": "Basic compile timeout on fast servers",
+ "been_offline_changes_saved_in_browser": "You’ve been offline for a while. Your changes are saved in the browser.",
"before_you_use_error_assistant": "Before you use Error Assist",
"best_for_individuals_and_teams_collaborating_on_complex_projects": "Best for individuals and teams collaborating on complex projects.",
"beta": "Beta",
@@ -755,6 +756,7 @@
"editing_and_collaboration": "Editing and collaboration",
"editing_captions": "Editing captions",
"editing_mode": "Editing mode",
+ "editing_paused": "Editing paused",
"editor": "Editor",
"editor_disconected_click_to_reconnect": "Editor disconnected, click anywhere to reconnect.",
"editor_font_family": "Editor font family",