Add loading state to permissions editor

Signed-off-by: marco <marcoambrosini@pm.me>

src/components/ConversationSettings/ConversationPermissionsSettings.vue

@@ -66,7 +66,7 @@
 			:conversation-name="conversationName"
 			:permissions="conversationPermissions"
 			:loading="loading"
-			@close="showPermissionsEditor = true"
+			@close="showPermissionsEditor = false"
 			@submit="handleSubmitPermissions" />
 	</div>
 </template>

src/components/PermissionsEditor/PermissionsEditor.vue

@@ -22,46 +22,52 @@
 <template>
 	<Modal v-on="$listeners">
 		<div class="wrapper">
-			<!-- eslint-disable-next-line vue/no-v-html -->
-			<p class="title" v-html="modalTitle" />
-			<form @submit.prevent="handleSubmitPermissions">
-				<CheckboxRadioSwitch
-					ref="callStart"
-					:checked.sync="callStart"
-					class="checkbox">
-					{{ t('spreed', 'Start a call') }}
-				</CheckboxRadioSwitch>
-				<CheckboxRadioSwitch
-					ref="lobbyIgnore"
-					:checked.sync="lobbyIgnore"
-					class="checkbox">
-					{{ t('spreed', 'Skip the lobby') }}
-				</CheckboxRadioSwitch>
-				<CheckboxRadioSwitch
-					ref="publishAudio"
-					:checked.sync="publishAudio"
-					class="checkbox">
-					{{ t('spreed', 'Enable the microphone') }}
-				</CheckboxRadioSwitch>
-				<CheckboxRadioSwitch
-					ref="publishVideo"
-					:checked.sync="publishVideo"
-					class="checkbox">
-					{{ t('spreed', 'Enable the camera') }}
-				</CheckboxRadioSwitch>
-				<CheckboxRadioSwitch
-					ref="publishScreen"
-					:checked.sync="publishScreen"
-					class="checkbox">
-					{{ t('spreed', 'Share the screen') }}
-				</CheckboxRadioSwitch>
-				<button ref="submit"
-					type="submit"
-					:disabled="submitButtonDisabled"
-					class="nc-button primary">
-					{{ t('spreed', 'Update permissions') }}
-				</button>
-			</form>
+			<template v-if="!loading">
+				<!-- eslint-disable-next-line vue/no-v-html -->
+				<p class="title" v-html="modalTitle" />
+				<form @submit.prevent="handleSubmitPermissions">
+					<CheckboxRadioSwitch
+						ref="callStart"
+						:checked.sync="callStart"
+						class="checkbox">
+						{{ t('spreed', 'Start a call') }}
+					</CheckboxRadioSwitch>
+					<CheckboxRadioSwitch
+						ref="lobbyIgnore"
+						:checked.sync="lobbyIgnore"
+						class="checkbox">
+						{{ t('spreed', 'Skip the lobby') }}
+					</CheckboxRadioSwitch>
+					<CheckboxRadioSwitch
+						ref="publishAudio"
+						:checked.sync="publishAudio"
+						class="checkbox">
+						{{ t('spreed', 'Enable the microphone') }}
+					</CheckboxRadioSwitch>
+					<CheckboxRadioSwitch
+						ref="publishVideo"
+						:checked.sync="publishVideo"
+						class="checkbox">
+						{{ t('spreed', 'Enable the camera') }}
+					</CheckboxRadioSwitch>
+					<CheckboxRadioSwitch
+						ref="publishScreen"
+						:checked.sync="publishScreen"
+						class="checkbox">
+						{{ t('spreed', 'Share the screen') }}
+					</CheckboxRadioSwitch>
+					<button ref="submit"
+						type="submit"
+						:disabled="submitButtonDisabled"
+						class="nc-button primary">
+						{{ t('spreed', 'Update permissions') }}
+					</button>
+				</form>
+			</template>
+			<div v-if="loading" class="loading-screen">
+				<span class="icon-loading" />
+				<p>{{ t('spreed', 'Updating permissions') }}</p>
+			</div>
 		</div>
 	</Modal>
 </template>
@@ -104,6 +110,14 @@ export default {
 			type: String,
 			default: '',
 		},
+
+		/**
+		 * Displays the loading state of this component
+		 */
+		loading: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {
@@ -186,13 +200,15 @@ export default {
 <style lang="scss" scoped>
 @import '../../assets/buttons.scss';
 
+$editor-width: 350px;
+
 .nc-button {
 	width: 100%;
 	margin-top: 12px;
 }
 
 .wrapper {
-	width: 350px;
+	width: $editor-width;
 	padding: 0 24px 24px 24px;
 }
 
@@ -202,4 +218,19 @@ export default {
 	padding-top: 24px;
 }
 
+.loading-screen {
+	width: $editor-width;
+	height: 200px;
+	text-align: center;
+	font-weight: bold;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+
+	// Loader
+	span {
+		margin-bottom: 16px;
+	}
+}
+
 </style>