diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/RepositoryHeader.vue | 2 | ||||
| -rw-r--r-- | src/views/RepositoryCommit.vue | 14 | ||||
| -rw-r--r-- | src/views/RepositoryLog.vue | 18 |
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 { |