refactor: migrate ng-cloak effect and remove obsolete ng-strict-di

#2318
MaibornWolff · Oct 31, 2022 · 7bb22a3 · 7bb22a3
1 parent 55e1a3d
commit 7bb22a3
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 3 deletions.
diff --git a/visualization/app/codeCharta/codeCharta.component.html b/visualization/app/codeCharta/codeCharta.component.html
@@ -1,4 +1,4 @@
-<div>
+<div [style.visibility]="isInitialized ? 'visible' : 'hidden'">
 	<cc-tool-bar></cc-tool-bar>
 
 	<cc-file-extension-bar></cc-file-extension-bar>

diff --git a/visualization/app/codeCharta/codeCharta.component.spec.ts b/visualization/app/codeCharta/codeCharta.component.spec.ts
@@ -23,4 +23,15 @@ describe("codeChartaComponent", () => {
 		expect(mockedStore.dispatch).toHaveBeenCalledWith(setIsLoadingFile(true))
 		expect(mockedLoadInitialFileService.loadFileOrSample).toHaveBeenCalled()
 	})
+
+	it("should set isInitilized on windows' load event, so the app doesn't flicker on initial page load", () => {
+		const mockedStore = { dispatch: jest.fn() } as unknown as Store
+		const mockedLoadInitialFileService = { loadFileOrSample: jest.fn() } as unknown as LoadInitialFileService
+
+		const codeChartaComponent = new CodeChartaComponent(mockedStore, mockedLoadInitialFileService)
+		expect(codeChartaComponent.isInitialized).toBe(false)
+
+		window.dispatchEvent(new Event("load"))
+		expect(codeChartaComponent.isInitialized).toBe(true)
+	})
 })
diff --git a/visualization/app/codeCharta/codeCharta.component.ts b/visualization/app/codeCharta/codeCharta.component.ts
@@ -11,11 +11,16 @@ import { Store } from "./state/angular-redux/store"
 })
 export class CodeChartaComponent implements OnInit {
 	version = packageJson.version
+	isInitialized = false
 
 	constructor(
 		@Inject(Store) private store: Store,
 		@Inject(LoadInitialFileService) private loadInitialFileService: LoadInitialFileService
-	) {}
+	) {
+		window.addEventListener("load", () => {
+			this.isInitialized = true
+		})
+	}
 
 	async ngOnInit(): Promise<void> {
 		this.store.dispatch(setIsLoadingFile(true))

diff --git a/visualization/app/index.html b/visualization/app/index.html
@@ -5,7 +5,7 @@
 		<meta charset="utf-8" />
 	</head>
 
-	<body ng-strict-di>
+	<body>
 		<cc-code-charta></cc-code-charta>
 	</body>
 </html>