New: Created a loading form skeleton (coscine/issues#1427)

package.json

@@ -18,11 +18,10 @@
   ],
   "dependencies": {
     "@types/jquery": "^3.5.5",
-    "bootstrap-vue": "^2.20.1",
+    "bootstrap-vue": "^2.21.2",
     "core-js": "^3.8.1",
-    "jquery": "^3.5.1",
+    "jquery": "^3.6.0",
     "vue": "^2.6.12",
-    "vue-i18n": "^8.22.2",
     "vue-loading-overlay": "^3.4.2",
     "vue-material-design-icons": "^4.11.0",
     "vue-runtime-helpers": "^1.1.2"
@@ -31,19 +30,20 @@
     "@hutson/semantic-delivery-gitlab": "^9.1.0",
     "@semantic-release/commit-analyzer": "^8.0.1",
     "@semantic-release/git": "^9.0.0",
-    "@semantic-release/gitlab": "^6.0.5",
-    "@semantic-release/npm": "^7.0.6",
-    "@semantic-release/release-notes-generator": "^9.0.1",
-    "@types/node": "^14.14.20",
-    "@typescript-eslint/eslint-plugin": "^4.12.0",
-    "@typescript-eslint/parser": "^4.12.0",
-    "@vue/cli-plugin-typescript": "^4.5.7",
-    "@vue/cli-service": "^4.5.7",
+    "@semantic-release/gitlab": "^6.0.9",
+    "@semantic-release/npm": "^7.1.1",
+    "@semantic-release/release-notes-generator": "^9.0.2",
+    "@types/node": "^14.14.37",
+    "@types/webpack-env": "^1.13.6",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
+    "@vue/cli-plugin-typescript": "^4.5.12",
+    "@vue/cli-service": "^4.5.12",
     "conventional-changelog-eslint": "3.0.9",
-    "core-js": "^3.8.2",
-    "eslint": "^7.17.0",
-    "semantic-release": "^17.3.1",
-    "typescript": "^4.0.3",
+    "core-js": "^3.10.1",
+    "eslint": "^7.24.0",
+    "semantic-release": "^17.4.2",
+    "typescript": "^4.2.4",
     "vue-template-compiler": "^2.6.12"
   },
   "repository": {

src/components/Loader/LoadingFormSkeleton.vue

+<template>
+  <span id="loadingFormSkeleton">
+    <b-row>
+      <div class="col-sm-3 labelSkeleton"><b-skeleton type="input" width="55%" /></div>
+      <div class="col-sm-9">
+        <b-skeleton type="input" width="85%" />
+      </div>
+    </b-row>
+    <b-row>
+      <div class="col-sm-3 labelSkeleton"><b-skeleton type="input" width="65%" /></div>
+      <div class="col-sm-9">
+        <b-skeleton type="input" width="55%" />
+      </div>
+    </b-row>
+    <b-row>
+      <div class="col-sm-3 labelSkeleton"><b-skeleton type="input" width="45%" /></div>
+      <div class="col-sm-9">
+        <b-skeleton type="input" width="70%" />
+      </div>
+    </b-row>
+  </span>
+</template>
+
+<script lang="ts">
+import { FormGroupPlugin, BRow, BSkeleton } from 'bootstrap-vue';
+import Vue from 'vue';
+Vue.use(FormGroupPlugin);
+Vue.component('b-row', BRow);
+Vue.component('b-skeleton', BSkeleton);
+
+export default Vue.extend({
+  name: 'CoscineLoadingFormSkeleton',
+  props: {},
+});
+</script>
+<style>
+#loadingFormSkeleton .row {
+  margin-bottom: 1rem;
+}
+#loadingFormSkeleton .labelSkeleton .b-skeleton {
+  float: right;
+}
+#loadingFormSkeleton .b-skeleton {    
+    margin-right: -7px;
+    margin-left: -7px;
+}
+</style>

src/coscine.d.ts

-declare var coscine: {
-    language: {
-        locale: string,
-    },
-    i18n: {
-        'component-library': {},
-    },
-};
-
-declare var _spPageContextInfo: any;
-
-declare class Organization {
-    public url: string;
-    public displayName: string;
-}

src/index.ts

@@ -5,6 +5,7 @@ export { default as CoscineFormTextarea } from './components/InputFields/Textare
 export { default as CoscineHeadline } from './components/Headline/Headline.vue';
 export { default as CoscineHorizontalDivider } from './components/Divider/HorizontalDivider.vue';
 export { default as CoscineLoadingBar } from './components/Loader/LoadingBar.vue';
+export { default as CoscineLoadingFormSkeleton } from './components/Loader/LoadingFormSkeleton.vue';
 export { default as CoscineLoadingSpinner } from './components/Loader/LoadingSpinner.vue';
 export { default as CoscineModal } from './components/Modal/Modal.vue';
 export { default as CoscineNotificationBanner } from './components/Banners/NotificationBanner.vue';