Add latest changes from gitlab-org/gitlab@master

3 files changed, 56 insertions, 1 deletions

diff --git a/app/assets/javascripts/static_site_editor/components/edit_area.vue b/app/assets/javascripts/static_site_editor/components/edit_area.vue
new file mode 100644
index 00000000000..921d93669c5
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/components/edit_area.vue
@@ -0,0 +1,18 @@
+<script>
+import { GlFormTextarea } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlFormTextarea,
+  },
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <gl-form-textarea :value="value" v-on="$listeners" />
+</template>
diff --git a/app/assets/javascripts/static_site_editor/components/static_site_editor.vue b/app/assets/javascripts/static_site_editor/components/static_site_editor.vue
index 7b8b46cb048..4a0e153eb33 100644
--- a/app/assets/javascripts/static_site_editor/components/static_site_editor.vue
+++ b/app/assets/javascripts/static_site_editor/components/static_site_editor.vue
@@ -1,3 +1,37 @@
+<script>
+import { mapState, mapActions } from 'vuex';
+import { GlSkeletonLoader } from '@gitlab/ui';
+
+import EditArea from './edit_area.vue';
+
+export default {
+  components: {
+    EditArea,
+    GlSkeletonLoader,
+  },
+  computed: {
+    ...mapState(['content', 'isContentLoaded', 'isLoadingContent']),
+  },
+  mounted() {
+    this.loadContent();
+  },
+  methods: {
+    ...mapActions(['loadContent']),
+  },
+};
+</script>
 <template>
-  <div></div>
+  <div class="d-flex justify-content-center h-100">
+    <div v-if="isLoadingContent" class="w-50 h-50 mt-2">
+      <gl-skeleton-loader :width="500" :height="102">
+        <rect width="500" height="16" rx="4" />
+        <rect y="20" width="375" height="16" rx="4" />
+        <rect x="380" y="20" width="120" height="16" rx="4" />
+        <rect y="40" width="250" height="16" rx="4" />
+        <rect x="255" y="40" width="150" height="16" rx="4" />
+        <rect x="410" y="40" width="90" height="16" rx="4" />
+      </gl-skeleton-loader>
+    </div>
+    <edit-area v-if="isContentLoaded" class="w-75 h-100 shadow-none" :value="content" />
+  </div>
 </template>
diff --git a/app/assets/javascripts/static_site_editor/store/state.js b/app/assets/javascripts/static_site_editor/store/state.js
index 512967cc3d9..68a7f95760c 100644
--- a/app/assets/javascripts/static_site_editor/store/state.js
+++ b/app/assets/javascripts/static_site_editor/store/state.js
@@ -1,4 +1,7 @@
 const createState = (initialState = {}) => ({
+  isLoadingContent: false,
+  isContentLoaded: false,
+
   content: '',
   ...initialState,
 });