Added loading overlays & fixed the default RepositoryHeader data values

3 files changed, 26 insertions, 8 deletions

diff --git a/src/components/RepositoryHeader.vue b/src/components/RepositoryHeader.vue
index db1ab1e..b0db4f9 100644
--- a/src/components/RepositoryHeader.vue
+++ b/src/components/RepositoryHeader.vue
@@ -29,7 +29,7 @@ export default {
 	},
 	setup(props)
 	{
-		const state = reactive({ title: String, about: String });
+		const state = reactive({ title: "", about: "" });
 
 		watch(() =>
 		{
diff --git a/src/views/RepositoryCommit.vue b/src/views/RepositoryCommit.vue
index 1fc1ea0..283ed69 100644
--- a/src/views/RepositoryCommit.vue
+++ b/src/views/RepositoryCommit.vue
@@ -1,7 +1,7 @@
 <template>
 	<RepositoryNavbar active-page="log" />
 	<div class="row mx-0">
-		<div class="col ms-2 ps-4 ps-sm-5 fs-5">
+		<div class="col ms-2 ps-4 ps-sm-5 fs-5 vld-parent">
 			<nav aria-label="breadcrumb">
 				<ol class="breadcrumb">
 					<li class="breadcrumb-item">
@@ -14,6 +14,10 @@
 					</li>
 				</ol>
 			</nav>
+			<Loading
+				v-model:active="is_loading" :height="24"
+				:width="24" color="#ffffff"
+				:opacity="0" />
 			<table id="commit-info" class="table table-dark">
 				<tbody>
 					<tr>
@@ -48,6 +52,8 @@
 <script>
 import RepositoryNavbar from "../components/RepositoryNavbar";
 import CommitPatch from "../components/CommitPatch";
+import Loading from "vue-loading-overlay";
+import 'vue-loading-overlay/dist/vue-loading.css';
 import { watch, reactive, toRefs } from "vue";
 import { format } from "date-fns";
 
@@ -55,7 +61,8 @@ export default {
 	name: "RepositoryCommit",
 	components: {
 		RepositoryNavbar,
-		CommitPatch
+		CommitPatch,
+		Loading
 	},
 	props: {
 		repository: {
@@ -69,7 +76,7 @@ export default {
 	},
 	setup(props)
 	{
-		const state = reactive({ commit_data: {} });
+		const state = reactive({ commit_data: {}, is_loading: true });
 
 		watch(() =>
 		{
@@ -79,6 +86,7 @@ export default {
 				{
 					data["data"]["date"] = format(new Date(data["data"]["date"]), "yyyy-MM-dd hh:mm");
 					state.commit_data = data["data"]
+					state.is_loading = false;
 				});
 		});
 
diff --git a/src/views/RepositoryLog.vue b/src/views/RepositoryLog.vue
index da93624..399fc78 100644
--- a/src/views/RepositoryLog.vue
+++ b/src/views/RepositoryLog.vue
@@ -1,6 +1,10 @@
 <template>
 	<RepositoryNavbar active-page="log" />
-	<div class="row mx-0">
+	<div class="row mx-0 vld-parent">
+		<Loading
+			v-model:active="is_loading" :height="24"
+			:width="24" color="#ffffff"
+			:opacity="0" />
 		<div class="col ms-4 ps-4 ps-sm-5 mt-3">
 			<table id="log" class="table table-dark fs-5">
 				<thead>
@@ -42,13 +46,16 @@
 
 <script>
 import RepositoryNavbar from "../components/RepositoryNavbar";
+import Loading from "vue-loading-overlay";
+import 'vue-loading-overlay/dist/vue-loading.css';
 import { format } from "date-fns";
 import { watch, reactive, toRefs } from "vue";
 
 export default {
 	name: "RepositoryLog",
 	components: {
-		RepositoryNavbar
+		RepositoryNavbar,
+		Loading
 	},
 	props: {
 		repository: {
@@ -64,13 +71,16 @@ export default {
 	},
 	setup(props)
 	{
-		const state = reactive({ commits: {} });
+		const state = reactive({ commits: {}, is_loading: true });
 
 		watch(() =>
 		{
 			fetch(`http://localhost:1337/api/v1/repos/${props.repository}/log`)
 				.then((res) => res.json())
-				.then((data) => state.commits = data["data"]);
+				.then((data) => {
+					state.commits = data["data"];
+					state.is_loading = false;
+				});
 		});
 
 		return {