fix Out of sync tests

cypress/e2e/diagramUpdate.spec.ts

@@ -9,10 +9,10 @@ describe('Auto sync tests', () => {
 	it('should dim diagram when code is edited', () => {
 		cy.contains('Auto sync').click();
 		cy.get('#view').should('not.have.class', 'outOfSync');
-		cy.get('#view').should('not.contain.text', 'Diagram out of sync.');
+		cy.get('#errorContainer').should('not.exist');
 		getEditor({ bottom: true, newline: true }).type('  C --> Test');
 		cy.get('#view').should('have.class', 'outOfSync');
-		cy.get('#view').should('contain.text', 'Diagram out of sync.');
+		cy.get('#errorContainer').should('contain.text', 'Diagram out of sync.');
 		cy.getLocalStorage('codeStore').snapshot();
 	});
 
@@ -21,9 +21,9 @@ describe('Auto sync tests', () => {
 		cy.get('#view').should('not.have.class', 'outOfSync');
 		getEditor().type('  C --> Test');
 		cy.get('#view').should('have.class', 'outOfSync');
-		cy.get('#view').should('contain.text', 'Diagram out of sync.');
+		cy.get('#errorContainer').should('contain.text', 'Diagram out of sync.');
 		getEditor().type(`${cmd}{enter}`);
-		cy.get('#view').should('not.contain.text', 'Diagram out of sync.');
+		cy.get('#errorContainer').should('not.exist');
 		cy.get('#view').should('not.have.class', 'outOfSync');
 	});
 

cypress/e2e/loadSite.spec.ts

@@ -5,6 +5,7 @@ describe('Site Loads', () => {
 		cy.clearLocalStorage();
 		cy.visit('/');
 	});
+
 	it('Check Home page load', () => {
 		cy.url().should('include', '/edit');
 		cy.contains('History').click();

src/lib/components/view.svelte

@@ -118,16 +118,21 @@
 	});
 </script>
 
-{#if error && $stateStore.error instanceof Error}
-	<div class="p-2 text-red-600" id="errorContainer">{$stateStore.error}</div>
-{/if}
-
-{#if outOfSync}
-	<div class="absolute w-full p-2 z-10 text-yellow-600 bg-base-100 bg-opacity-80 text-center">
-		Diagram out of sync. <br />
-		Press <i class="fas fa-sync" /> (Sync button) or <kbd>{cmdKey} + Enter</kbd> to sync.
+{#if (error && $stateStore.error instanceof Error) || outOfSync}
+	<div
+		class="absolute w-full p-2 z-10 {error
+			? 'text-red-600'
+			: 'text-yellow-600'} bg-base-100 bg-opacity-80 text-center"
+		id="errorContainer">
+		{#if error}
+			{$stateStore.error}
+		{:else}
+			Diagram out of sync. <br />
+			Press <i class="fas fa-sync" /> (Sync button) or <kbd>{cmdKey} + Enter</kbd> to sync.
+		{/if}
 	</div>
 {/if}
+
 <div id="view" bind:this={view} class="p-2 h-full" class:error class:outOfSync>
 	<div id="container" bind:this={container} class="h-full overflow-auto" class:hide />
 </div>