diff --git a/package.json b/package.json
index 32832460a22..8891ceacd19 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "@nguniversal/express-engine": "^13.0.2",
     "@ngx-translate/core": "^13.0.0",
     "@nicky-lenaers/ngx-scroll-to": "^9.0.0",
+    "@rezonant/preboot": "^8.0.0",
     "angular-idle-preload": "3.0.0",
     "angulartics2": "^12.0.0",
     "axios": "^0.27.2",
@@ -116,6 +117,7 @@
     "ngx-moment": "^5.0.0",
     "ngx-pagination": "5.0.0",
     "ngx-sortablejs": "^11.1.0",
+    "ngx-ui-switch": "^11.0.1",
     "nouislider": "^14.6.3",
     "pem": "1.14.4",
     "postcss-cli": "^9.1.0",
@@ -128,8 +130,7 @@
     "url-parse": "^1.5.6",
     "uuid": "^8.3.2",
     "webfontloader": "1.6.28",
-    "zone.js": "~0.11.5",
-    "ngx-ui-switch": "^11.0.1"
+    "zone.js": "~0.11.5"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "~13.1.0",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ebf9aa4937a..99a84cfdc5a 100755
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -37,6 +37,7 @@ import { APP_CONFIG, AppConfig } from '../config/app-config.interface';
 import { NgxMaskModule } from 'ngx-mask';
 import { StoreDevModules } from '../config/store/devtools';
 import { RootModule } from './root.module';
+import { defaultOptions, PrebootModule } from '@rezonant/preboot';
 
 export function getConfig() {
   return environment;
@@ -77,6 +78,68 @@ const IMPORTS = [
   StoreDevModules,
   EagerThemesModule,
   RootModule,
+  BrowserModule.withServerTransition({ appId: 'dspace-angular' }),
+  PrebootModule.withConfig({
+    appRoot: 'ds-app',
+    eventSelectors: [
+      // Preboot defaults START
+
+      // for recording changes in form elements
+      {
+        selector: 'input,textarea',
+        events: ['keypress', 'keyup', 'keydown', 'input', 'change']
+      },
+      { selector: 'select,option', events: ['change'] },
+
+      // when user hits return button in an input box
+      {
+        selector: 'input',
+        events: ['keyup'],
+        preventDefault: true,
+        keyCodes: [13],
+        freeze: true
+      },
+
+      // when user submit form (press enter, click on button/input[type="submit"])
+      {
+        selector: 'form',
+        events: ['submit'],
+        preventDefault: true,
+        freeze: true
+      },
+
+      // for tracking focus (no need to replay)
+      {
+        selector: 'input,textarea',
+        events: ['focusin', 'focusout', 'mousedown', 'mouseup'],
+        replay: false
+      },
+
+      // // user clicks on a button
+      // {
+      //   selector: 'button',
+      //   events: ['click'],
+      //   preventDefault: true,
+      //   freeze: true
+      // },
+
+      // Preboot defaults END
+
+      // we have a lot of "link buttons"
+      // we probably don't want to freeze either (or maybe make the overlay transparent?)
+      {
+        selector: 'a.preboot-replay,a.dropdown-toggle,button',
+        events: ['click'],
+        preventDefault: true,
+      },
+      // router links can misbehave with event replay enabled
+      {
+        selector: 'a',
+        events: ['click'],
+        preventDefault: true,
+      }
+    ]
+  })
 ];
 
 const PROVIDERS = [
@@ -148,7 +211,6 @@ const EXPORTS = [
 
 @NgModule({
   imports: [
-    BrowserModule.withServerTransition({ appId: 'dspace-angular' }),
     ...IMPORTS
   ],
   providers: [
diff --git a/src/app/community-list-page/community-list/community-list.component.html b/src/app/community-list-page/community-list/community-list.component.html
index 821cb58473b..8facc331284 100644
--- a/src/app/community-list-page/community-list/community-list.component.html
+++ b/src/app/community-list-page/community-list/community-list.component.html
@@ -25,6 +25,7 @@
                  class="example-tree-node expandable-node">
     <div class="btn-group">
       <button type="button" class="btn btn-default" cdkTreeNodeToggle
+              [id]="'toggle-' + node.id"
               [title]="'toggle ' + node.name"
               [attr.aria-label]="'toggle ' + node.name"
               (click)="toggleExpanded(node)"
diff --git a/src/app/core/auth/auth.service.spec.ts b/src/app/core/auth/auth.service.spec.ts
index b38d17aecdb..b6bb27a6cbc 100644
--- a/src/app/core/auth/auth.service.spec.ts
+++ b/src/app/core/auth/auth.service.spec.ts
@@ -34,6 +34,7 @@ import { NotificationsServiceStub } from '../../shared/testing/notifications-ser
 import { SetUserAsIdleAction, UnsetUserAsIdleAction } from './auth.actions';
 import { SpecialGroupDataMock, SpecialGroupDataMock$ } from '../../shared/testing/special-group.mock';
 import { cold } from 'jasmine-marbles';
+import { NgZone } from '@angular/core';
 
 describe('AuthService test', () => {
 
@@ -134,6 +135,7 @@ describe('AuthService test', () => {
           { provide: HardRedirectService, useValue: hardRedirectService },
           { provide: NotificationsService, useValue: NotificationsServiceStub },
           { provide: TranslateService, useValue: getMockTranslateService() },
+          { provide: NgZone, useValue: new NgZone({}) },
           CookieService,
           AuthService
         ],
@@ -254,13 +256,13 @@ describe('AuthService test', () => {
       }).compileComponents();
     }));
 
-    beforeEach(inject([CookieService, AuthRequestService, Store, Router, RouteService], (cookieService: CookieService, authReqService: AuthRequestService, store: Store<AppState>, router: Router, routeService: RouteService, notificationsService: NotificationsService, translateService: TranslateService) => {
+    beforeEach(inject([CookieService, AuthRequestService, Store, Router, RouteService], (cookieService: CookieService, authReqService: AuthRequestService, store: Store<AppState>, router: Router, routeService: RouteService, notificationsService: NotificationsService, translateService: TranslateService, zone: NgZone) => {
       store
         .subscribe((state) => {
           (state as any).core = Object.create({});
           (state as any).core.auth = authenticatedState;
         });
-      authService = new AuthService({}, window, undefined, authReqService, mockEpersonDataService, router, routeService, cookieService, store, hardRedirectService, notificationsService, translateService);
+      authService = new AuthService({}, window, undefined, authReqService, mockEpersonDataService, router, routeService, cookieService, store, hardRedirectService, notificationsService, translateService, zone);
     }));
 
     it('should return true when user is logged in', () => {
@@ -330,7 +332,7 @@ describe('AuthService test', () => {
       }).compileComponents();
     }));
 
-    beforeEach(inject([ClientCookieService, AuthRequestService, Store, Router, RouteService], (cookieService: ClientCookieService, authReqService: AuthRequestService, store: Store<AppState>, router: Router, routeService: RouteService, notificationsService: NotificationsService, translateService: TranslateService) => {
+    beforeEach(inject([ClientCookieService, AuthRequestService, Store, Router, RouteService], (cookieService: ClientCookieService, authReqService: AuthRequestService, store: Store<AppState>, router: Router, routeService: RouteService, notificationsService: NotificationsService, translateService: TranslateService, zone: NgZone) => {
       const expiredToken: AuthTokenInfo = new AuthTokenInfo('test_token');
       expiredToken.expires = Date.now() - (1000 * 60 * 60);
       authenticatedState = {
@@ -345,7 +347,7 @@ describe('AuthService test', () => {
           (state as any).core = Object.create({});
           (state as any).core.auth = authenticatedState;
         });
-      authService = new AuthService({}, window, undefined, authReqService, mockEpersonDataService, router, routeService, cookieService, store, hardRedirectService, notificationsService, translateService);
+      authService = new AuthService({}, window, undefined, authReqService, mockEpersonDataService, router, routeService, cookieService, store, hardRedirectService, notificationsService, translateService, zone);
       storage = (authService as any).storage;
       routeServiceMock = TestBed.inject(RouteService);
       routerStub = TestBed.inject(Router);
@@ -559,13 +561,13 @@ describe('AuthService test', () => {
       }).compileComponents();
     }));
 
-    beforeEach(inject([CookieService, AuthRequestService, Store, Router, RouteService], (cookieService: CookieService, authReqService: AuthRequestService, store: Store<AppState>, router: Router, routeService: RouteService, notificationsService: NotificationsService, translateService: TranslateService) => {
+    beforeEach(inject([CookieService, AuthRequestService, Store, Router, RouteService], (cookieService: CookieService, authReqService: AuthRequestService, store: Store<AppState>, router: Router, routeService: RouteService, notificationsService: NotificationsService, translateService: TranslateService, zone: NgZone) => {
       store
         .subscribe((state) => {
           (state as any).core = Object.create({});
           (state as any).core.auth = unAuthenticatedState;
         });
-      authService = new AuthService({}, window, undefined, authReqService, mockEpersonDataService, router, routeService, cookieService, store, hardRedirectService, notificationsService, translateService);
+      authService = new AuthService({}, window, undefined, authReqService, mockEpersonDataService, router, routeService, cookieService, store, hardRedirectService, notificationsService, translateService, zone);
     }));
 
     it('should return null for the shortlived token', () => {
@@ -599,13 +601,13 @@ describe('AuthService test', () => {
       }).compileComponents();
     }));
 
-    beforeEach(inject([CookieService, AuthRequestService, Store, Router, RouteService], (cookieService: CookieService, authReqService: AuthRequestService, store: Store<AppState>, router: Router, routeService: RouteService, notificationsService: NotificationsService, translateService: TranslateService) => {
+    beforeEach(inject([CookieService, AuthRequestService, Store, Router, RouteService], (cookieService: CookieService, authReqService: AuthRequestService, store: Store<AppState>, router: Router, routeService: RouteService, notificationsService: NotificationsService, translateService: TranslateService, zone: NgZone) => {
       store
         .subscribe((state) => {
           (state as any).core = Object.create({});
           (state as any).core.auth = idleState;
         });
-      authService = new AuthService({}, window, undefined, authReqService, mockEpersonDataService, router, routeService, cookieService, store, hardRedirectService, notificationsService, translateService);
+      authService = new AuthService({}, window, undefined, authReqService, mockEpersonDataService, router, routeService, cookieService, store, hardRedirectService, notificationsService, translateService, zone);
     }));
 
     it('isUserIdle should return true when user is not idle', () => {
diff --git a/src/app/core/auth/auth.service.ts b/src/app/core/auth/auth.service.ts
index 999ea863df6..aca7322b553 100644
--- a/src/app/core/auth/auth.service.ts
+++ b/src/app/core/auth/auth.service.ts
@@ -1,4 +1,4 @@
-import { Inject, Injectable, Optional } from '@angular/core';
+import { Inject, Injectable, NgZone, Optional } from '@angular/core';
 import { Router } from '@angular/router';
 import { HttpHeaders } from '@angular/common/http';
 import { REQUEST, RESPONSE } from '@nguniversal/express-engine/tokens';
@@ -90,7 +90,8 @@ export class AuthService {
               protected store: Store<AppState>,
               protected hardRedirectService: HardRedirectService,
               private notificationService: NotificationsService,
-              private translateService: TranslateService
+              private translateService: TranslateService,
+              private zone: NgZone,
   ) {
     this.store.pipe(
       select(isAuthenticated),
@@ -350,7 +351,11 @@ export class AuthService {
       if (currentlyRefreshingToken && token !== undefined && authTokenInfo === undefined) {
         // Token refresh failed => Error notification => 10 second wait => Page reloads & user logged out
         this.notificationService.error(this.translateService.get('auth.messages.token-refresh-failed'));
-        setTimeout(() => this.navigateToRedirectUrl(this.hardRedirectService.getCurrentRoute()), 10000);
+
+        this.zone.runOutsideAngular(() => {
+          setTimeout(() => this.navigateToRedirectUrl(this.hardRedirectService.getCurrentRoute()), 10000);
+        });
+
         currentlyRefreshingToken = false;
       }
       // If new token.expires is different => Refresh succeeded
@@ -368,10 +373,13 @@ export class AuthService {
           if (hasValue(this.tokenRefreshTimer)) {
             clearTimeout(this.tokenRefreshTimer);
           }
-          this.tokenRefreshTimer = setTimeout(() => {
-            this.store.dispatch(new RefreshTokenAction(token));
-            currentlyRefreshingToken = true;
-          }, timeLeftBeforeRefresh);
+
+          this.zone.runOutsideAngular(() => {
+            this.tokenRefreshTimer = setTimeout(() => {
+              this.store.dispatch(new RefreshTokenAction(token));
+              currentlyRefreshingToken = true;
+            }, timeLeftBeforeRefresh);
+          });
         }
       }
     });
diff --git a/src/app/root/root.component.html b/src/app/root/root.component.html
index 9ef70540e9d..e46f9f87dec 100644
--- a/src/app/root/root.component.html
+++ b/src/app/root/root.component.html
@@ -4,6 +4,8 @@
      value: (!(sidebarVisible | async) ? 'hidden' : (slideSidebarOver | async) ? 'shown' : 'expanded'),
      params: {collapsedSidebarWidth: (collapsedSidebarWidth | async), totalSidebarWidth: (totalSidebarWidth | async)}
     }">
+
+    <ds-loading-csr></ds-loading-csr>
     <ds-themed-header-navbar-wrapper></ds-themed-header-navbar-wrapper>
     <main class="main-content">
       <ds-themed-breadcrumbs></ds-themed-breadcrumbs>
diff --git a/src/app/root/root.component.ts b/src/app/root/root.component.ts
index aae991dca39..3dc555919c3 100644
--- a/src/app/root/root.component.ts
+++ b/src/app/root/root.component.ts
@@ -1,4 +1,4 @@
-import { map } from 'rxjs/operators';
+import { map, startWith } from 'rxjs/operators';
 import { Component, Inject, Input, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 
@@ -71,7 +71,8 @@ export class RootComponent implements OnInit {
     const sidebarCollapsed = this.menuService.isMenuCollapsed(MenuID.ADMIN);
     this.slideSidebarOver = combineLatestObservable([sidebarCollapsed, this.windowService.isXsOrSm()])
       .pipe(
-        map(([collapsed, mobile]) => collapsed || mobile)
+        map(([collapsed, mobile]) => collapsed || mobile),
+        startWith(true),
       );
 
     if (this.router.url === getPageInternalServerErrorRoute()) {
diff --git a/src/app/search-navbar/search-navbar.component.html b/src/app/search-navbar/search-navbar.component.html
index e1de59ce512..85713996152 100644
--- a/src/app/search-navbar/search-navbar.component.html
+++ b/src/app/search-navbar/search-navbar.component.html
@@ -4,7 +4,7 @@
       <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
              formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
              class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right p-1" [attr.data-test]="'header-search-box' | dsBrowserOnly">
-      <a class="submit-icon" [routerLink]="" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()" [attr.data-test]="'header-search-icon' | dsBrowserOnly">
+      <a class="submit-icon preboot-replay" id="search-navbar-container-submit" href="javascript:void(0);" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()" [attr.data-test]="'header-search-icon' | dsBrowserOnly">
         <em class="fas fa-search fa-lg fa-fw"></em>
       </a>
     </form>
diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
index c2b414b6f39..8d42d223082 100644
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
@@ -2,7 +2,7 @@
   <li *ngIf="!(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item"
       (click)="$event.stopPropagation();">
     <div ngbDropdown #loginDrop display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
-      <a href="javascript:void(0);" class="dropdownLogin px-1 " [attr.aria-label]="'nav.login' |translate" (click)="$event.preventDefault()" [attr.data-test]="'login-menu' | dsBrowserOnly" ngbDropdownToggle>
+      <a href="javascript:void(0);" class="dropdownLogin px-1 " [attr.aria-label]="'nav.login' |translate" (click)="$event.preventDefault()" id="login-toggle" [attr.data-test]="'login-menu' | dsBrowserOnly" ngbDropdownToggle>
         {{ 'nav.login' | translate }}
       </a>
       <div class="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu
@@ -19,7 +19,7 @@
   </li>
   <li *ngIf="(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item">
     <div ngbDropdown display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
-      <a href="javascript:void(0);" role="button" [attr.aria-label]="'nav.logout' |translate" (click)="$event.preventDefault()" [title]="'nav.logout' | translate" class="px-1" [attr.data-test]="'user-menu' | dsBrowserOnly" ngbDropdownToggle>
+      <a href="javascript:void(0);" role="button" [attr.aria-label]="'nav.logout' |translate" (click)="$event.preventDefault()" [title]="'nav.logout' | translate" class="px-1" id="logout-toggle" [attr.data-test]="'user-menu' | dsBrowserOnly" ngbDropdownToggle>
         <i class="fas fa-user-circle fa-lg fa-fw"></i></a>
       <div class="logoutDropdownMenu" ngbDropdownMenu [attr.aria-label]="'nav.logout' |translate">
         <ds-user-menu></ds-user-menu>
diff --git a/src/app/shared/lang-switch/lang-switch.component.html b/src/app/shared/lang-switch/lang-switch.component.html
index d9a5efaa814..f74cca571f3 100644
--- a/src/app/shared/lang-switch/lang-switch.component.html
+++ b/src/app/shared/lang-switch/lang-switch.component.html
@@ -1,5 +1,5 @@
 <div ngbDropdown class="navbar-nav" *ngIf="moreThanOneLanguage" display="dynamic" placement="bottom-right">
-  <a href="javascript:void(0);" role="button"
+  <a href="javascript:void(0);" role="button" id="lang-switch-toggle"
      [attr.aria-label]="'nav.language' |translate"
      [title]="'nav.language' | translate" class="px-1"
      (click)="$event.preventDefault()" data-toggle="dropdown" ngbDropdownToggle
diff --git a/src/app/shared/loading-csr/loading-csr.component.html b/src/app/shared/loading-csr/loading-csr.component.html
new file mode 100644
index 00000000000..6565f7d7269
--- /dev/null
+++ b/src/app/shared/loading-csr/loading-csr.component.html
@@ -0,0 +1 @@
+<div class="csr-progress-bar fixed-top" role="progressbar" *ngIf="loading"></div>
diff --git a/src/app/shared/loading-csr/loading-csr.component.scss b/src/app/shared/loading-csr/loading-csr.component.scss
new file mode 100644
index 00000000000..f2e02b84452
--- /dev/null
+++ b/src/app/shared/loading-csr/loading-csr.component.scss
@@ -0,0 +1,20 @@
+.csr-progress-bar {
+  background: linear-gradient(to left, transparent 50%, var(--ds-csr-loading-color) 50%);
+  background-size: var(--ds-csr-loading-dash);
+  height: var(--ds-csr-loading-height);
+  width: 100%;
+
+  // make sure it stays above the navbar but below the admin sidebar
+  z-index: calc(var(--ds-sidebar-z-index) - 1);
+
+  animation: csr-loading-animation 0.5s linear infinite;
+}
+
+@keyframes csr-loading-animation {
+  0% {
+    background-position-x: 0
+  }
+  100% {
+    background-position-x: var(--ds-csr-loading-dash)
+  }
+}
diff --git a/src/app/shared/loading-csr/loading-csr.component.spec.ts b/src/app/shared/loading-csr/loading-csr.component.spec.ts
new file mode 100644
index 00000000000..5b6848d71b0
--- /dev/null
+++ b/src/app/shared/loading-csr/loading-csr.component.spec.ts
@@ -0,0 +1,46 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoadingCsrComponent } from './loading-csr.component';
+import { PLATFORM_ID } from '@angular/core';
+
+describe('LoadingCsrComponent', () => {
+  let component: LoadingCsrComponent;
+  let fixture: ComponentFixture<LoadingCsrComponent>;
+
+  const init = async (platformId) => {
+
+    await TestBed.configureTestingModule({
+      declarations: [ LoadingCsrComponent ],
+      providers: [
+        {
+          provide: PLATFORM_ID,
+          useValue: platformId,
+        },
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LoadingCsrComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  };
+
+  describe('on the server', () => {
+    beforeEach(async () => {
+      await init('server');
+    });
+
+    it('should have loading=true', () => {
+      expect(component.loading).toBe(true);
+    });
+  });
+
+  describe('in the browser', () => {
+    beforeEach(async () => {
+      await init('browser');
+    });
+
+    it('should have loading=false', () => {
+      expect(component.loading).toBe(false);
+    });
+  });
+});
diff --git a/src/app/shared/loading-csr/loading-csr.component.ts b/src/app/shared/loading-csr/loading-csr.component.ts
new file mode 100644
index 00000000000..a18b4b67590
--- /dev/null
+++ b/src/app/shared/loading-csr/loading-csr.component.ts
@@ -0,0 +1,20 @@
+import { Component, Inject, PLATFORM_ID } from '@angular/core';
+import { isPlatformServer } from '@angular/common';
+
+/**
+ * Shows a loading animation when rendered on the server
+ */
+@Component({
+  selector: 'ds-loading-csr',
+  templateUrl: './loading-csr.component.html',
+  styleUrls: ['./loading-csr.component.scss']
+})
+export class LoadingCsrComponent {
+  loading: boolean;
+
+  constructor(
+    @Inject(PLATFORM_ID) private platformId: any,
+  ) {
+    this.loading = isPlatformServer(this.platformId);
+  }
+}
diff --git a/src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.html b/src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.html
index cdf8fb8c371..b3da2a4901c 100644
--- a/src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.html
+++ b/src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.html
@@ -1,5 +1,5 @@
 <div class="d-flex flex-row">
-    <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="[]" [queryParams]="getQueryParams()" [queryParamsHandling]="'merge'" class="lead">
+    <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="[]" [queryParams]="getQueryParams()" [queryParamsHandling]="'merge'" [id]="'browse-entry-link-' + object.value" class="lead">
         {{object.value}}
     </a>
     <span *ngIf="linkType == linkTypes.None" class="lead">
diff --git a/src/app/shared/object-list/collection-list-element/collection-list-element.component.html b/src/app/shared/object-list/collection-list-element/collection-list-element.component.html
index c61adf5dad5..7ff9089a41f 100644
--- a/src/app/shared/object-list/collection-list-element/collection-list-element.component.html
+++ b/src/app/shared/object-list/collection-list-element/collection-list-element.component.html
@@ -1,4 +1,4 @@
-<a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/collections/' + object.id]" class="lead">
+<a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/collections/' + object.id]" [id]="'collection-link-' + object.id" class="lead">
     {{object.name}}
 </a>
 <span *ngIf="linkType == linkTypes.None" class="lead">
diff --git a/src/app/shared/object-list/community-list-element/community-list-element.component.html b/src/app/shared/object-list/community-list-element/community-list-element.component.html
index af01999ca7c..3ca8796af01 100644
--- a/src/app/shared/object-list/community-list-element/community-list-element.component.html
+++ b/src/app/shared/object-list/community-list-element/community-list-element.component.html
@@ -1,4 +1,4 @@
-<a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/communities/' + object.id]" class="lead">
+<a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/communities/' + object.id]" [id]="'community-link-' + object.id" class="lead">
     {{object.name}}
 </a>
 <span *ngIf="linkType == linkTypes.None" class="lead">
diff --git a/src/app/shared/object-list/item-list-element/item-types/item/item-list-element.component.html b/src/app/shared/object-list/item-list-element/item-types/item/item-list-element.component.html
index 3877e2f335b..d8caea958ac 100644
--- a/src/app/shared/object-list/item-list-element/item-types/item/item-list-element.component.html
+++ b/src/app/shared/object-list/item-list-element/item-types/item/item-list-element.component.html
@@ -1 +1 @@
-<ds-item-search-result-list-element [showLabel]="showLabel" [object]="{ indexableObject: object, hitHighlights: {} }" [linkType]="linkType"></ds-item-search-result-list-element>
+<ds-item-search-result-list-element [showLabel]="showLabel" [object]="{ indexableObject: object, hitHighlights: {} }" [linkType]="linkType" [id]="'item-link-' + object.id"></ds-item-search-result-list-element>
diff --git a/src/app/shared/search-form/search-form.component.html b/src/app/shared/search-form/search-form.component.html
index 226962cc617..f6f55b09e1c 100644
--- a/src/app/shared/search-form/search-form.component.html
+++ b/src/app/shared/search-form/search-form.component.html
@@ -4,7 +4,7 @@
             <div *ngIf="showScopeSelector" class="input-group-prepend">
                 <button class="scope-button btn btn-outline-secondary text-truncate" [ngbTooltip]="(selectedScope | async)?.name" type="button" (click)="openScopeModal()">{{(selectedScope | async)?.name || ('search.form.scope.all' | translate)}}</button>
             </div>
-            <input type="text" [(ngModel)]="query" name="query" class="form-control" attr.aria-label="{{ searchPlaceholder }}" [attr.data-test]="'search-box' | dsBrowserOnly"
+            <input id="search-form-input" type="text" [(ngModel)]="query" name="query" class="form-control" attr.aria-label="{{ searchPlaceholder }}" [attr.data-test]="'search-box' | dsBrowserOnly"
                    [placeholder]="searchPlaceholder">
             <span class="input-group-append">
             <button type="submit" class="search-button btn btn-{{brandColor}}" [attr.data-test]="'search-button' | dsBrowserOnly"><i class="fas fa-search"></i> {{ ('search.form.search' | translate) }}</button>
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index f40ddd5b900..f8173d3e6eb 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -293,6 +293,7 @@ import { BrowserOnlyPipe } from './utils/browser-only.pipe';
 import { ThemedLoadingComponent } from './loading/themed-loading.component';
 import { PersonPageClaimButtonComponent } from './dso-page/person-page-claim-button/person-page-claim-button.component';
 import { SearchExportCsvComponent } from './search/search-export-csv/search-export-csv.component';
+import { LoadingCsrComponent } from './loading-csr/loading-csr.component';
 
 const MODULES = [
   CommonModule,
@@ -351,6 +352,7 @@ const COMPONENTS = [
   LangSwitchComponent,
   LoadingComponent,
   ThemedLoadingComponent,
+  LoadingCsrComponent,
   LogInComponent,
   LogOutComponent,
   NumberPickerComponent,
diff --git a/src/app/statistics/google-analytics.service.spec.ts b/src/app/statistics/google-analytics.service.spec.ts
index 0c6bc2bc51f..043f139199c 100644
--- a/src/app/statistics/google-analytics.service.spec.ts
+++ b/src/app/statistics/google-analytics.service.spec.ts
@@ -6,6 +6,7 @@ import {
   createSuccessfulRemoteDataObject$
 } from '../shared/remote-data.utils';
 import { ConfigurationProperty } from '../core/shared/configuration-property.model';
+import { NgZone } from '@angular/core';
 
 describe('GoogleAnalyticsService', () => {
   const trackingIdProp = 'google.analytics.key';
@@ -51,7 +52,7 @@ describe('GoogleAnalyticsService', () => {
       body: bodyElementSpy,
     });
 
-    service = new GoogleAnalyticsService(angularticsSpy, configSpy, documentSpy);
+    service = new GoogleAnalyticsService(angularticsSpy, configSpy, documentSpy, new NgZone({}));
   });
 
   it('should be created', () => {
@@ -71,7 +72,7 @@ describe('GoogleAnalyticsService', () => {
           findByPropertyName: createFailedRemoteDataObject$(),
         });
 
-        service = new GoogleAnalyticsService(angularticsSpy, configSpy, documentSpy);
+        service = new GoogleAnalyticsService(angularticsSpy, configSpy, documentSpy, new NgZone({}));
       });
 
       it('should NOT add a script to the body', () => {
@@ -89,7 +90,7 @@ describe('GoogleAnalyticsService', () => {
       describe('when the tracking id is empty', () => {
         beforeEach(() => {
           configSpy = createConfigSuccessSpy();
-          service = new GoogleAnalyticsService(angularticsSpy, configSpy, documentSpy);
+          service = new GoogleAnalyticsService(angularticsSpy, configSpy, documentSpy, new NgZone({}));
         });
 
         it('should NOT add a script to the body', () => {
diff --git a/src/app/statistics/google-analytics.service.ts b/src/app/statistics/google-analytics.service.ts
index 0b52f54c4f0..107ffb666f4 100644
--- a/src/app/statistics/google-analytics.service.ts
+++ b/src/app/statistics/google-analytics.service.ts
@@ -1,4 +1,4 @@
-import { Inject, Injectable } from '@angular/core';
+import { Inject, Injectable, NgZone } from '@angular/core';
 import { Angulartics2GoogleAnalytics } from 'angulartics2';
 import { ConfigurationDataService } from '../core/data/configuration-data.service';
 import { getFirstCompletedRemoteData } from '../core/shared/operators';
@@ -16,6 +16,7 @@ export class GoogleAnalyticsService {
     private angulartics: Angulartics2GoogleAnalytics,
     private configService: ConfigurationDataService,
     @Inject(DOCUMENT) private document: any,
+    private zone: NgZone,
   ) { }
 
   /**
@@ -25,28 +26,30 @@ export class GoogleAnalyticsService {
    * page and starts tracking.
    */
   addTrackingIdToPage(): void {
-    this.configService.findByPropertyName('google.analytics.key').pipe(
-      getFirstCompletedRemoteData(),
-    ).subscribe((remoteData) => {
-      // make sure we got a success response from the backend
-      if (!remoteData.hasSucceeded) { return; }
+    this.zone.runOutsideAngular(() => {
+      this.configService.findByPropertyName('google.analytics.key').pipe(
+        getFirstCompletedRemoteData(),
+      ).subscribe((remoteData) => {
+        // make sure we got a success response from the backend
+        if (!remoteData.hasSucceeded) { return; }
 
-      const trackingId = remoteData.payload.values[0];
+        const trackingId = remoteData.payload.values[0];
 
-      // make sure we received a tracking id
-      if (isEmpty(trackingId)) { return; }
+        // make sure we received a tracking id
+        if (isEmpty(trackingId)) { return; }
 
-      // add trackingId snippet to page
-      const keyScript = this.document.createElement('script');
-      keyScript.innerHTML =   `(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-                              (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-                              m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-                              })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-                              ga('create', '${trackingId}', 'auto');`;
-      this.document.body.appendChild(keyScript);
+        // add trackingId snippet to page
+        const keyScript = this.document.createElement('script');
+        keyScript.innerHTML =   `(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+                                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+                                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+                                })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+                                ga('create', '${trackingId}', 'auto');`;
+        this.document.body.appendChild(keyScript);
 
-      // start tracking
-      this.angulartics.startTracking();
+        // start tracking
+        this.angulartics.startTracking();
+      });
     });
   }
 }
diff --git a/src/modules/app/browser-app.module.ts b/src/modules/app/browser-app.module.ts
index dc3be0de30a..ae4498170d1 100644
--- a/src/modules/app/browser-app.module.ts
+++ b/src/modules/app/browser-app.module.ts
@@ -38,6 +38,7 @@ import { extendEnvironmentWithAppConfig } from '../../config/config.util';
 import { CorrelationIdService } from '../../app/correlation-id/correlation-id.service';
 
 import { environment } from '../../environments/environment';
+import { DOCUMENT } from '@angular/common';
 
 export const REQ_KEY = makeStateKey<string>('req');
 
@@ -77,7 +78,8 @@ export function getRequest(transferState: TransferState): any {
       useFactory: (
         transferState: TransferState,
         dspaceTransferState: DSpaceTransferState,
-        correlationIdService: CorrelationIdService
+        correlationIdService: CorrelationIdService,
+        document: any,
       ) => {
         if (transferState.hasKey<AppConfig>(APP_CONFIG_STATE)) {
           const appConfig = transferState.get<AppConfig>(APP_CONFIG_STATE, new DefaultAppConfig());
@@ -87,10 +89,23 @@ export function getRequest(transferState: TransferState): any {
         return () =>
           dspaceTransferState.transfer().then((b: boolean) => {
             correlationIdService.initCorrelationId();
+
+            // Workaround for flash of unstyled content during preboot:
+            // Adapted from https://github.com/angular/preboot/issues/75#issuecomment-421266570
+            const styles: any[] = Array.prototype.slice.apply(document.querySelectorAll(`style[ng-transition]`));
+            styles.forEach(el => {
+              // Remove ng-transition attribute from SSR styles to prevent Angular appInitializerFactory
+              // from removing them before preboot has completed
+              el.removeAttribute('ng-transition');
+            });
+            document.addEventListener('PrebootComplete', () => {
+              // Once preboot is finished, remove SSR styles
+              styles.forEach(el => el.remove());
+            });
             return b;
           });
       },
-      deps: [TransferState, DSpaceTransferState, CorrelationIdService],
+      deps: [TransferState, DSpaceTransferState, CorrelationIdService, DOCUMENT],
       multi: true
     },
     {
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 40180d8342a..ae675bc2851 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -87,4 +87,9 @@
   --ds-search-form-scope-max-width: 150px;
 
   --ds-gap: 0.25rem;
+
+  --ds-csr-loading-color: var(--bs-green);
+  --ds-csr-loading-height: 2px;
+  --ds-csr-loading-dash: 20px;
+  --ds-csr-loading-color: var(--bs-green);
 }
diff --git a/yarn.lock b/yarn.lock
index 1996ace1b1f..64a44cd9df5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1956,6 +1956,13 @@
   resolved "https://registry.yarnpkg.com/@researchgate/react-intersection-observer/-/react-intersection-observer-1.3.5.tgz#0321d2dd609aaacdb9bace8004d99c72824fb142"
   integrity sha512-aYlsex5Dd6BAHMJvJrUoFp8gzgMSL27xFvrxkVYW0bV1RMAapVsO+QeYLtTaSF/QCflktODodvv+wJm49oMnnQ==
 
+"@rezonant/preboot@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@rezonant/preboot/-/preboot-8.0.0.tgz#dc201887c4cfe8e20f58feefbfef7851921dcf86"
+  integrity sha512-t3ViT5ns3EYezQ5pnMvwqVe1ki6E0jqa6y2QFFFCaEADKoYZO6tyb+dDknhPQ0LiegftcG3DG1igoA5crNzlLQ==
+  dependencies:
+    tslib "^2.0.0"
+
 "@scarf/scarf@^1.1.0":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@scarf/scarf/-/scarf-1.1.1.tgz#d8b9f20037b3a37dbf8dcdc4b3b72f9285bfce35"