(slots) add spinner icon

Author: antoine92190

README.md

@@ -692,6 +692,7 @@ Example:
 | `no-room-selected`                  | Replace the no room selected template                       | -                                   | -                                                                                                                  |
 | `menu-icon`                         | Replace the room menu icon                                  | -                                   | -                                                                                                                  |
 | `toggle-icon`                       | Replace the toggle room list icon                           | -                                   | -                                                                                                                  |
+| `spinner-icon`                      | Replace the loading spinner icon                            | `show, infinite`                    | -                                                                                                                  |
 | `scroll-icon`                       | Replace the scroll to newest message icon                   | -                                   | -                                                                                                                  |
 | `reply-close-icon`                  | Replace the reply close icon                                | -                                   | -                                                                                                                  |
 | `image-close-icon`                  | Replace the image close icon                                | -                                   | -                                                                                                                  |

src/components/Loader/Loader.vue

@@ -8,7 +8,9 @@
 				'vac-container-top': infinite
 			}"
 		>
-			<div id="vac-circle" />
+			<slot name="spinner-icon" v-bind="{ show, infinite }">
+				<div id="vac-circle" />
+			</slot>
 		</div>
 	</transition>
 </template>

src/lib/Message/MessageFile/MessageFile.vue

@@ -11,7 +11,11 @@
 			<loader
 				:style="{ top: `${imageResponsive.loaderTop}px` }"
 				:show="isImageLoading"
-			/>
+			>
+				<template v-for="(idx, name) in $scopedSlots" #[name]="data">
+					<slot :name="name" v-bind="data" />
+				</template>
+			</loader>
 			<div
 				class="vac-message-image"
 				:class="{

src/lib/Room/Room.vue

@@ -34,7 +34,11 @@
 			class="vac-container-scroll"
 			@scroll="onContainerScroll"
 		>
-			<loader :show="loadingMessages" />
+			<loader :show="loadingMessages">
+				<template v-for="(idx, name) in $scopedSlots" #[name]="data">
+					<slot :name="name" v-bind="data" />
+				</template>
+			</loader>
 			<div class="vac-messages-container">
 				<div :class="{ 'vac-messages-hidden': loadingMessages }">
 					<transition name="vac-fade-message">
@@ -61,7 +65,11 @@
 							@infinite="loadMoreMessages"
 						>
 							<template #spinner>
-								<loader :show="true" :infinite="true" />
+								<loader :show="true" :infinite="true">
+									<template v-for="(idx, name) in $scopedSlots" #[name]="data">
+										<slot :name="name" v-bind="data" />
+									</template>
+								</loader>
 							</template>
 							<template #no-results>
 								<div />

src/lib/RoomsList/RoomsList.vue

@@ -22,7 +22,11 @@
 			</rooms-search>
 		</slot>
 
-		<loader :show="loadingRooms" />
+		<loader :show="loadingRooms">
+			<template v-for="(idx, name) in $scopedSlots" #[name]="data">
+				<slot :name="name" v-bind="data" />
+			</template>
+		</loader>
 
 		<div v-if="!loadingRooms && !rooms.length" class="vac-rooms-empty">
 			<slot name="rooms-empty">
@@ -55,7 +59,11 @@
 			</div>
 			<transition name="vac-fade-message">
 				<div v-if="rooms.length && !loadingRooms" id="infinite-loader-rooms">
-					<loader :show="showLoader" :infinite="true" />
+					<loader :show="showLoader" :infinite="true">
+						<template v-for="(idx, name) in $scopedSlots" #[name]="data">
+							<slot :name="name" v-bind="data" />
+						</template>
+					</loader>
 				</div>
 			</transition>
 		</div>