fix #560

resources/assets/stylesheets/scss/courseware.scss

@@ -119,6 +119,10 @@ c o n t e n t s
     }
 }
 
+.cw-loading-indicator-content {
+    margin-top: 76px;
+}
+
 /* * * * * * * * * * *
 c o n t e n t s  e n d
 * * * * * * * * * * */

resources/assets/stylesheets/scss/progress_indicator.scss

+.progress-indicator-wrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .progress-indicator {
+        width: 100%;
+        background-image: url("#{$image-path}/ajax-indicator-black.svg");
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+    .progress-indicator-description,
+    .progress-indicator-description-default {
+        color: $dark-gray-color-45;
+        text-align: center;
+        margin-top: 10px;
+    }
+    .progress-indicator-description-default {
+        display: none;
+    }
+    @media (prefers-reduced-motion) {
+        .progress-indicator {
+            @include background-icon(refresh, info, 32);
+        }
+        .progress-indicator-description-default {
+            display: block;
+        }
+    }
+}
\ No newline at end of file

resources/assets/stylesheets/studip.scss

@@ -19,6 +19,7 @@
 @import "scss/dates";
 @import "scss/files";
 @import "scss/fullscreen";
+@import "scss/progress_indicator.scss";
 @import "scss/my_courses";
 @import "scss/oer";
 @import "scss/report";

resources/vue/components/StudipProgressIndicator.vue

+<template>
+    <div class="progress-indicator-wrapper">
+        <div class="progress-indicator" :style="indicatorStyle"></div>
+        <p v-if="description !== ''" class="progress-indicator-description">
+            {{ description }}
+        </p>
+        <p v-else class="progress-indicator-description-default">
+            <translate>Lade...</translate>
+        </p>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'studip-progress-indicator',
+    props: {
+        description: {
+            type: String,
+            required: false
+        },
+        width: {
+            type: Number,
+            default: 32
+        }
+    },
+    computed: {
+        indicatorStyle() {
+            let style = 'background-size: ' + this.width + 'px;';
+            style += 'height: ' + this.width + 'px;';
+
+            return style;
+        }
+    }
+}
+</script>
\ No newline at end of file

resources/vue/components/courseware/IndexApp.vue

@@ -13,13 +13,18 @@
             <courseware-view-widget></courseware-view-widget>
         </MountingPortal>
     </div>
-    <div v-else><translate>Inhalte werden geladen</translate>...</div>
+    <studip-progress-indicator
+        v-else
+        class="cw-loading-indicator-content"
+        :description="$gettext('Lade Lernmaterial...')"
+    />
 </template>
 
 <script>
 import CoursewareStructuralElement from './CoursewareStructuralElement.vue';
 import CoursewareViewWidget from './CoursewareViewWidget.vue';
 import CoursewareActionWidget from './CoursewareActionWidget.vue';
+import StudipProgressIndicator from '../StudipProgressIndicator.vue';
 import { mapActions, mapGetters } from 'vuex';
 
 export default {
@@ -27,6 +32,7 @@ export default {
         CoursewareStructuralElement,
         CoursewareViewWidget,
         CoursewareActionWidget,
+        StudipProgressIndicator,
     },
     data: () => ({
         canVisit: null,