Refactor #3832 Refactor #3833 - For VirtualScroller

api-generator/components/virtualscroller.js

@@ -153,15 +153,19 @@ const VirtualScrollerEvents = [
 const VirtualScrollerSlots = [
     {
         name: 'item',
-        description: 'Content for the item'
+        description: 'Content for the item.'
     },
     {
         name: 'content',
-        description: 'Custom content for the component'
+        description: 'Custom content for the component.'
     },
     {
         name: 'loader',
-        description: 'Custom content for the loader items'
+        description: 'Custom content for the loader items.'
+    },
+    {
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
     }
 ];
 

components/lib/virtualscroller/VirtualScroller.d.ts

@@ -308,6 +308,10 @@ export interface VirtualScrollerSlots {
          */
         options: VirtualScrollerLoaderOptions;
     }): VNode[];
+    /**
+     * Custom loading icon template.
+     */
+    loadingicon(): VNode[];
 }
 
 /**

components/lib/virtualscroller/VirtualScroller.vue

@@ -31,7 +31,9 @@
                         <slot name="loader" :options="getLoaderOptions(index, isBoth() && { numCols: d_numItemsInViewport.cols })"></slot>
                     </template>
                 </template>
-                <i v-else class="p-virtualscroller-loading-icon pi pi-spinner pi-spin"></i>
+                <slot name="loadingicon">
+                    <SpinnerIcon spin class="p-virtualscroller-loading-icon" />
+                </slot>
             </div>
         </div>
     </template>
@@ -42,6 +44,7 @@
 </template>
 
 <script>
+import SpinnerIcon from 'primevue/icon/spinner';
 import { DomHandler } from 'primevue/utils';
 
 export default {
@@ -742,6 +745,9 @@ export default {
 
             return this.columns;
         }
+    },
+    components: {
+        SpinnerIcon: SpinnerIcon
     }
 };
 </script>