1 files changed, 25 insertions, 27 deletions
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 132f999808..490465ea12 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -45,33 +45,31 @@
 				{{end}}
 			</div>
 		</div>
-		<script id="diff-data-script">
-				(() => {
-					const diffData = {
-						files: [{{range $i, $file := .Diff.Files}}{Name:"{{$file.Name}}",NameHash:"{{$file.NameHash}}",Type:{{$file.Type}},IsBin:{{$file.IsBin}},Addition:{{$file.Addition}},Deletion:{{$file.Deletion}}},{{end}}],
-						isIncomplete: {{.Diff.IsIncomplete}},
-						tooManyFilesMessage: "{{$.locale.Tr "repo.diff.too_many_files"}}",
-						binaryFileMessage: "{{$.locale.Tr "repo.diff.bin"}}",
-						showMoreMessage: "{{.locale.Tr "repo.diff.show_more"}}",
-						statisticsMessage: "{{.locale.Tr "repo.diff.stats_desc_file"}}",
-						fileTreeIsVisible: false,
-						fileListIsVisible: false,
-						isLoadingNewData: false,
-						diffEnd: {{.Diff.End}},
-						link: "{{$.Link}}"
-					};
-					if(window.config.pageData.diffFileInfo) {
-						// Page is already loaded - add the data to our existing data
-						window.config.pageData.diffFileInfo.files.push(...diffData.files);
-						window.config.pageData.diffFileInfo.isIncomplete = diffData.isIncomplete;
-						window.config.pageData.diffFileInfo.diffEnd = diffData.diffEnd;
-						window.config.pageData.diffFileInfo.link = diffData.link;
-					} else {
-						// new load of page - populate initial data
-						window.config.pageData.diffFileInfo = diffData;
-					}
-				})();
-				</script>
+		<script id="diff-data-script" type="module">
+			const diffDataFiles = [{{range $i, $file := .Diff.Files}}{Name:"{{$file.Name}}",NameHash:"{{$file.NameHash}}",Type:{{$file.Type}},IsBin:{{$file.IsBin}},Addition:{{$file.Addition}},Deletion:{{$file.Deletion}}},{{end}}];
+			const diffData = {
+				isIncomplete: {{.Diff.IsIncomplete}},
+				tooManyFilesMessage: "{{$.locale.Tr "repo.diff.too_many_files"}}",
+				binaryFileMessage: "{{$.locale.Tr "repo.diff.bin"}}",
+				showMoreMessage: "{{.locale.Tr "repo.diff.show_more"}}",
+				statisticsMessage: "{{.locale.Tr "repo.diff.stats_desc_file"}}",
+				linkLoadMore: "{{$.Link}}?skip-to={{.Diff.End}}&file-only=true",
+			};
+
+			// for first time loading, the diffFileInfo is a plain object
+			// after the Vue component is mounted, the diffFileInfo is a reactive object
+			// keep in mind that this script block would be executed many times when loading more files, by "loadMoreFiles"
+			let diffFileInfo = window.config.pageData.diffFileInfo || {
+				files:[],
+				fileTreeIsVisible: false,
+				fileListIsVisible: false,
+				isLoadingNewData: false,
+				selectedItem: '',
+			};
+			diffFileInfo = Object.assign(diffFileInfo, diffData);
+			diffFileInfo.files.push(...diffDataFiles);
+			window.config.pageData.diffFileInfo = diffFileInfo;
+		</script>
 		<div id="diff-file-list"></div>
 		<div id="diff-container">
 				<div id="diff-file-tree" class="gt-hidden"></div>