[DURACOM-303] fix SSR check on template and on components missing the environment config. Add descriptive comment for skeleton component. Fix JS error on SSR.

Author: FrancescoMolinaro

src/app/browse-by/browse-by-date/browse-by-date.component.ts

@@ -31,6 +31,7 @@ import {
   APP_CONFIG,
   AppConfig,
 } from '../../../config/app-config.interface';
+import { environment } from '../../../environments/environment';
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 import { BrowseService } from '../../core/browse/browse.service';
 import {
@@ -108,7 +109,7 @@ export class BrowseByDateComponent extends BrowseByMetadataComponent implements
   }
 
   ngOnInit(): void {
-    if (!this.renderOnServerSide && isPlatformServer(this.platformId)) {
+    if (!this.renderOnServerSide && !environment.ssr.enableBrowseComponent && isPlatformServer(this.platformId)) {
       this.loading$ = observableOf(false);
       return;
     }

src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html

@@ -1,4 +1,4 @@
-<section class="comcol-page-browse-section">
+<section class="comcol-page-browse-section" *ngIf="(!ssrRenderingDisabled)">
   <div class="browse-by-metadata w-100">
     <ds-browse-by *ngIf="(loading$ | async) !== true" class="col-xs-12 w-100"
                          title="{{'browse.title' | translate:{

src/app/browse-by/browse-by-metadata/browse-by-metadata.component.spec.ts

@@ -268,8 +268,8 @@ describe('BrowseByMetadataComponent', () => {
 
   describe('when rendered in SSR', () => {
     beforeEach(() => {
-      comp.platformId = 'server';
-      spyOn((comp as any).browseService, 'getBrowseEntriesFor');
+      comp.ssrRenderingDisabled = true;
+      spyOn((comp as any).browseService, 'getBrowseEntriesFor').and.returnValue(createSuccessfulRemoteDataObject$(null));
     });
 
     it('should not call getBrowseEntriesFor on init', (done) => {
@@ -284,7 +284,7 @@ describe('BrowseByMetadataComponent', () => {
 
   describe('when rendered in CSR', () => {
     beforeEach(() => {
-      comp.platformId = 'browser';
+      comp.ssrRenderingDisabled = false;
       spyOn((comp as any).browseService, 'getBrowseEntriesFor').and.returnValue(createSuccessfulRemoteDataObject$(new BrowseEntry()));
     });
 

src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts

@@ -202,6 +202,10 @@ export class BrowseByMetadataComponent implements OnInit, OnChanges, OnDestroy {
    * Observable determining if the loading animation needs to be shown
    */
   loading$ = observableOf(true);
+  /**
+   * Whether this component should be rendered or not in SSR
+   */
+  ssrRenderingDisabled = false;
 
   public constructor(protected route: ActivatedRoute,
                      protected browseService: BrowseService,
@@ -218,11 +222,12 @@ export class BrowseByMetadataComponent implements OnInit, OnChanges, OnDestroy {
       currentPage: 1,
       pageSize: this.appConfig.browseBy.pageSize,
     });
+    this.ssrRenderingDisabled = !this.renderOnServerSide && !environment.ssr.enableBrowseComponent && isPlatformServer(this.platformId);
   }
 
 
   ngOnInit(): void {
-    if (!this.renderOnServerSide && !environment.ssr.enableBrowseComponent && isPlatformServer(this.platformId)) {
+    if (this.ssrRenderingDisabled) {
       this.loading$ = observableOf(false);
       return;
     }
@@ -348,7 +353,6 @@ export class BrowseByMetadataComponent implements OnInit, OnChanges, OnDestroy {
     this.paginationService.clearPagination(this.paginationConfig.id);
   }
 
-
 }
 
 /**

src/app/browse-by/browse-by-title/browse-by-title.component.ts

@@ -18,6 +18,7 @@ import {
   take,
 } from 'rxjs/operators';
 
+import { environment } from '../../../environments/environment';
 import {
   SortDirection,
   SortOptions,
@@ -63,7 +64,7 @@ import {
 export class BrowseByTitleComponent extends BrowseByMetadataComponent implements OnInit {
 
   ngOnInit(): void {
-    if (!this.renderOnServerSide && isPlatformServer(this.platformId)) {
+    if (!this.renderOnServerSide && !environment.ssr.enableBrowseComponent && isPlatformServer(this.platformId)) {
       this.loading$ = observableOf(false);
       return;
     }

src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.ts

@@ -25,6 +25,9 @@ import { hasValue } from '../../../empty.util';
   templateUrl: './search-results-skeleton.component.html',
   styleUrl: './search-results-skeleton.component.scss',
 })
+/**
+ * Component to show placeholders for search results while loading, to give a loading feedback to the user without layout shifting.
+ */
 export class SearchResultsSkeletonComponent implements OnInit {
   @Input()
   showThumbnails: boolean;