Loading to Atoms

src/components/Atoms/Loading.vue

@@ -0,0 +1,20 @@
+<template>
+	<NcLoadingIcon class="loading" />
+</template>
+
+<script>
+import { NcLoadingIcon } from '@nextcloud/vue'
+
+export default {
+	name: 'Loading',
+	components: {
+		NcLoadingIcon,
+	},
+}
+</script>
+
+<style scoped>
+	.loading {
+		margin: 2rem 0;
+	}
+</style>

src/components/Discover/Search.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<NcLoadingIcon v-if="loading" />
+		<Loading v-if="loading" />
 		<ul v-if="!loading">
 			<NcListItem v-for="feed in feeds"
 				:key="feed.link"
@@ -21,7 +21,8 @@
 </template>
 
 <script>
-import { NcAvatar, NcListItem, NcLoadingIcon } from '@nextcloud/vue'
+import { NcAvatar, NcListItem } from '@nextcloud/vue'
+import Loading from '../Atoms/Loading.vue'
 import axios from '@nextcloud/axios'
 import { debounce } from '../../utils/debounce.js'
 import { formatTimeAgo } from '../../utils/time.js'
@@ -31,9 +32,9 @@ import { showError } from '@nextcloud/dialogs'
 export default {
 	name: 'Search',
 	components: {
+		Loading,
 		NcAvatar,
 		NcListItem,
-		NcLoadingIcon,
 	},
 	props: {
 		value: {

src/components/Discover/TopList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<NcLoadingIcon v-if="loading" />
+		<Loading v-if="loading" />
 		<ul v-if="!loading" class="tops">
 			<li v-for="top in tops" :key="top.link">
 				<TopItem :author="top.author"
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import { NcLoadingIcon } from '@nextcloud/vue'
+import Loading from '../Atoms/Loading.vue'
 import TopItem from './TopItem.vue'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
@@ -25,7 +25,7 @@ import { showError } from '@nextcloud/dialogs'
 export default {
 	name: 'TopList',
 	components: {
-		NcLoadingIcon,
+		Loading,
 		TopItem,
 	},
 	data() {

src/components/Feed/Episodes.vue

@@ -1,6 +1,6 @@
 <template>
 	<div :class="currentEpisode ? 'margin' : ''">
-		<NcLoadingIcon v-if="loading" class="loading" />
+		<Loading v-if="loading" />
 		<ul v-if="!loading">
 			<NcListItem v-for="episode in episodes"
 				:key="episode.episodeGuid"
@@ -38,8 +38,9 @@
 </template>
 
 <script>
-import { NcActionButton, NcAvatar, NcListItem, NcLoadingIcon } from '@nextcloud/vue'
+import { NcActionButton, NcAvatar, NcListItem } from '@nextcloud/vue'
 import { formatTimeAgo, formatTimer } from '../../utils/time.js'
+import Loading from '../Atoms/Loading.vue'
 import PlayButton from 'vue-material-design-icons/Play.vue'
 import StopButton from 'vue-material-design-icons/Stop.vue'
 import axios from '@nextcloud/axios'
@@ -49,10 +50,10 @@ import { showError } from '@nextcloud/dialogs'
 export default {
 	name: 'Episodes',
 	components: {
+		Loading,
 		NcActionButton,
 		NcAvatar,
 		NcListItem,
-		NcLoadingIcon,
 		PlayButton,
 		StopButton,
 	},
@@ -100,10 +101,6 @@ export default {
 		opacity: .5;
 	}
 
-	.loading {
-		margin: 2rem 0;
-	}
-
 	.margin {
 		margin-bottom: 6rem;
 	}

src/components/Player/Bar.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-if="player.episode" class="footer">
-		<NcLoadingIcon v-if="!player.loaded" class="loading" />
+		<Loading v-if="!player.loaded" />
 		<ProgressBar v-if="player.loaded" />
 		<div v-if="player.loaded" class="player">
 			<img :src="player.episode.episodeImage">
@@ -15,7 +15,7 @@
 <script>
 import Controls from './Controls.vue'
 import Infos from './Infos.vue'
-import { NcLoadingIcon } from '@nextcloud/vue'
+import Loading from '../Atoms/Loading.vue'
 import ProgressBar from './ProgressBar.vue'
 import Timer from './Timer.vue'
 import Volume from './Volume.vue'
@@ -25,7 +25,7 @@ export default {
 	components: {
 		Controls,
 		Infos,
-		NcLoadingIcon,
+		Loading,
 		ProgressBar,
 		Timer,
 		Volume,
@@ -63,8 +63,4 @@ export default {
 	.volume {
 		width: 10%;
 	}
-
-	.loading {
-		margin: 2rem 0;
-	}
 </style>

src/components/Sidebar/Subscriptions.vue

@@ -8,7 +8,7 @@
 					</template>
 				</NcAppNavigationNew>
 			</router-link>
-			<NcLoadingIcon v-if="loading" />
+			<Loading v-if="loading" />
 			<ul v-if="!loading">
 				<Item v-for="subscriptionUrl of subscriptions"
 					:key="subscriptionUrl"
@@ -19,13 +19,9 @@
 </template>
 
 <script>
-import {
+import { NcAppContentList, NcAppNavigation, NcAppNavigationNew } from '@nextcloud/vue'
-	NcAppContentList,
-	NcAppNavigation,
-	NcAppNavigationNew,
-	NcLoadingIcon,
-} from '@nextcloud/vue'
 import Item from './Item.vue'
+import Loading from '../Atoms/Loading.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import { showError } from '@nextcloud/dialogs'
 
@@ -33,10 +29,10 @@ export default {
 	name: 'Subscriptions',
 	components: {
 		Item,
+		Loading,
 		NcAppContentList,
 		NcAppNavigation,
 		NcAppNavigationNew,
-		NcLoadingIcon,
 		Plus,
 	},
 	data() {

src/views/Feed.vue

@@ -1,6 +1,6 @@
 <template>
 	<NcAppContent>
-		<NcLoadingIcon v-if="loading" class="loading" />
+		<Loading v-if="loading" />
 		<NcEmptyContent v-if="failed" :name="t('Error loading feed')">
 			<template #icon>
 				<Alert />
@@ -17,10 +17,11 @@
 </template>
 
 <script>
-import { NcAppContent, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
+import { NcAppContent, NcEmptyContent } from '@nextcloud/vue'
 import Alert from 'vue-material-design-icons/Alert.vue'
 import Banner from '../components/Feed/Banner.vue'
 import Episodes from '../components/Feed/Episodes.vue'
+import Loading from '../components/Atoms/Loading.vue'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 
@@ -30,9 +31,9 @@ export default {
 		Alert,
 		Banner,
 		Episodes,
+		Loading,
 		NcAppContent,
 		NcEmptyContent,
-		NcLoadingIcon,
 	},
 	data() {
 		return {
@@ -59,9 +60,3 @@ export default {
 	},
 }
 </script>
-
-<style scoped>
-	.loading {
-		margin: 2rem 0;
-	}
-</style>