[ACA-4729] Add infinite scroll to version list (#9248)

* [ACA-4729] Add infinite scroll to version list

* [ACA-4729] CR fixes

* [ACA-4729] CR fixes

* [ACA-4729] Items count fix for infinite scroll datasource

docs/content-services/components/infinite-scroll-datasource.md

@@ -0,0 +1,66 @@
+---
+Title: Infinite Scroll Datasource
+Added: v6.6.0
+Status: Active
+Last reviewed: 2024-01-15
+---
+
+# [Infinite Scroll Datasource](../../../lib/content-services/src/lib/infinite-scroll-datasource/infinite-scroll-datasource.ts "Defined in infinite-scroll-datasource.ts")
+
+Contains abstract class acting as a baseline for various datasources for infinite scrolls. 
+
+## Basic Usage
+
+First step to use infinite scroll datasource in any component is creating a datasource class extending `InfiniteScrollDatasource` using specific source of data e.g. one of the content endpoints.
+```ts
+export class VersionListDataSource extends InfiniteScrollDatasource<VersionEntry> {
+    constructor(private versionsApi: VersionsApi, private node: Node) {
+        super();
+    }
+
+    getNextBatch(pagingOptions: ContentPagingQuery): Observable<VersionEntry[]> {
+        return from(this.versionsApi.listVersionHistory(this.node.id, pagingOptions)).pipe(
+            take(1),
+            map((versionPaging) => versionPaging.list.entries)
+        );
+    }
+}
+```
+
+Then in component that will have the infinite scroll define the datasource as instance of a class created in previous step, optionally you can set custom size of the items batch or listen to loading state changes:
+```ts
+this.versionsDataSource = new VersionListDataSource(this.versionsApi, this.node);
+this.versionsDataSource.batchSize = 50;
+this.versionsDataSource.isLoading.pipe(takeUntil(this.onDestroy$)).subscribe((isLoading) => this.isLoading = isLoading);
+```
+
+Final step is to add the [CdkVirtualScrollViewport](https://material.angular.io/cdk/scrolling/api#CdkVirtualScrollViewport) with [CdkVirtualFor](https://material.angular.io/cdk/scrolling/api#CdkVirtualForOf) loop displaying items from the datasource.
+```html
+<cdk-virtual-scroll-viewport appendOnly itemSize="88">
+    <div *cdkVirtualFor="let version of versionsDataSource"></div>
+</cdk-virtual-scroll-viewport>
+```
+
+When user will scroll down to the bottom of the list next batch of items will be fetched until all items are visible.
+
+## Class members
+
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| batchSize | `number` | 100 | Determines how much items will be fetched within one batch. |
+| firstItem | `T` | | Returns the first item ever fetched. |
+| isLoading | [`Observable`](https://rxjs.dev/api/index/class/Observable)`<boolean>` | | Observable representing the state of loading the first batch. |
+| itemsCount | `number` | | Number of items fetched so far. |
+
+### Methods
+
+-   **connect**(collectionViewer: [`CollectionViewer`](https://material.angular.io/cdk/collections/api)): [`Observable`](https://rxjs.dev/api/index/class/Observable)`<T>`<br/>
+    Called by the virtual scroll viewport to receive a stream that emits the data array that should be rendered.
+    -   collectionViewer:_ [`CollectionViewer`](https://material.angular.io/cdk/collections/api)  - collection viewer providing view changes that are listened to so that next batch can be fetched
+    -   **Returns** [`Observable`](https://rxjs.dev/api/index/class/Observable)`<T>` - Data stream containing fetched items.
+-   **disconnect**(): void<br/>
+    Called when viewport is destroyed, disconnects the datasource, unsubscribes from the view changes.
+-   **reset**(): void<br/>
+    Resets the datasource by fetching the first batch.