Added loading overlays & fixed the default RepositoryHeader data values

5 files changed, 45 insertions, 8 deletions

diff --git a/package-lock.json b/package-lock.json
index 266ea36..2787ff0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "js-yaml": "^4.1.0",
         "nodegit": "^0.27.0",
         "vue": "^3.0.11",
+        "vue-loading-overlay": "^4.0.2",
         "vue-router": "^4.0.8"
       },
       "devDependencies": {
@@ -17057,6 +17058,17 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "node_modules/vue-loading-overlay": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vue-loading-overlay/-/vue-loading-overlay-4.0.2.tgz",
+      "integrity": "sha512-2QNBeNrrzzYHFqe5hAjMXsWyy5FQ4f5xmqn6CwIbf54WoRtTu6tGlCAvHsgNnZQxTh8PG+Zo6244pglCkdXglg==",
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.8.tgz",
@@ -30644,6 +30656,12 @@
         }
       }
     },
+    "vue-loading-overlay": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vue-loading-overlay/-/vue-loading-overlay-4.0.2.tgz",
+      "integrity": "sha512-2QNBeNrrzzYHFqe5hAjMXsWyy5FQ4f5xmqn6CwIbf54WoRtTu6tGlCAvHsgNnZQxTh8PG+Zo6244pglCkdXglg==",
+      "requires": {}
+    },
     "vue-router": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.8.tgz",
diff --git a/package.json b/package.json
index 253769d..8db9404 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "js-yaml": "^4.1.0",
     "nodegit": "^0.27.0",
     "vue": "^3.0.11",
+    "vue-loading-overlay": "^4.0.2",
     "vue-router": "^4.0.8"
   },
   "devDependencies": {
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 {