[DURACOM-303] refactor thumbnail's skeleton style

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

@@ -5,14 +5,16 @@
 </div>
 
 @if((viewMode$ | async) === ViewMode.ListElement) {
-  @for (result of loadingResults; track result) {
-      <div class="row flex-nowrap result-row">
+  @for (result of loadingResults; track result; let first = $first) {
+      <div [class.my-4]="!first" class="row">
       @if(showThumbnails) {
-        <div class="thumbnail-skeleton">
-          <ngx-skeleton-loader/>
+        <div class="col-3 col-md-2">
+          <div class="thumbnail-skeleton position-relative">
+            <ngx-skeleton-loader/>
+          </div>
         </div>
       }
-      <div [class.col-9]="showThumbnails" [class.col-md-12]="!showThumbnails">
+      <div [class.col-9]="showThumbnails" [class.col-md-10]="showThumbnails" [class.col-md-12]="!showThumbnails">
         <div class="badge-skeleton">
           <ngx-skeleton-loader/>
         </div>

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

@@ -20,12 +20,13 @@
   }
 
   .thumbnail-skeleton {
+    max-width: var(--ds-thumbnail-max-width);
+    height: 100%;
+
     ngx-skeleton-loader .skeleton-loader {
-      width: var(--ds-search-skeleton-thumbnail-width);
-      height: var(--ds-search-skeleton-thumbnail-height);
-      padding: var(--ds-search-skeleton-thumbnail-padding);
       margin-right: var(--ds-search-skeleton-thumbnail-margin);
       border-radius: 0;
+      height: 100%;
     }
   }
 
@@ -52,8 +53,4 @@
   }
 }
 
-.result-row {
-  margin-right: 0;
-  margin-left: 0;
-}
 

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

@@ -29,17 +29,28 @@ import { hasValue } from '../../../empty.util';
  * 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 {
+  /**
+   * Whether the search result contains thumbnail
+   */
   @Input()
   showThumbnails: boolean;
-
+  /**
+   * The number of search result loaded in the current page
+   */
   @Input()
   numberOfResults = 0;
-
+  /**
+   * How many placeholder are displayed for the search result text
+   */
   @Input()
   textLineCount = 2;
-
+  /**
+   * The view mode of the search page
+   */
   public viewMode$: Observable<ViewMode>;
-
+  /**
+   * Array built from numberOfResults to count and iterate based on index
+   */
   public loadingResults: number[];
 
   protected readonly ViewMode = ViewMode;

src/styles/_custom_variables.scss

@@ -141,9 +141,6 @@
 
   --ds-search-skeleton-text-height: 20px;
   --ds-search-skeleton-badge-height: 18px;
-  --ds-search-skeleton-thumbnail-height: 125px;
-  --ds-search-skeleton-thumbnail-width: 90px;
-  --ds-search-skeleton-thumbnail-padding: 1em;
   --ds-search-skeleton-thumbnail-margin: 1em;
   --ds-search-skeleton-text-line-count: 2;
   --ds-search-skeleton-badge-width: 75px;