fix(showcase): prevent layout shift on image loading (#983)

## Proposed change

<!-- Please include a summary of the changes and the related issue.
Please also include relevant motivation and context. List any
dependencies that is required for this change. -->

## Related issues

- 🐛 Fixes #(issue)
- 🚀 Feature #(issue)

<!-- Please make sure to follow the contributing guidelines on
https://github.com/amadeus-digital/Otter/blob/main/CONTRIBUTING.md -->

apps/showcase/src/app/home/home.template.html

@@ -2,5 +2,5 @@
   <h1>Otter</h1>
   <p>This is a showcase application.</p>
   <p>You can find examples of Otter features with some explanations.</p>
-  <img width="500" height="500" [src]="'otter-a.png' | dynamicContent">
+  <img width="500" height="500" [src]="'otter-a.svg' | dynamicContent">
 </div>

apps/showcase/src/assets/rules/rulesets.json

@@ -102,8 +102,8 @@
               {
                 "elementType": "ACTION",
                 "actionType": "UPDATE_ASSET",
-                "asset": "otter.png",
-                "value": "otter-summer.png"
+                "asset": "otter.svg",
+                "value": "otter-summer.svg"
               }
             ],
             "failureElements": []

apps/showcase/src/components/showcase/basic/basic-pres.style.scss

@@ -6,6 +6,11 @@
       height: 20px;
     }
   }
+
+  .card img {
+    aspect-ratio: 1 / 1;
+    width: 100%;
+  }
 }
 
 o3r-basic-pres {

apps/showcase/src/components/showcase/basic/basic-pres.template.html

@@ -1,7 +1,7 @@
 <div class="card my-3 overflow-hidden">
   <div class="row g-0">
     <div class="col-4 bg-body-tertiary d-flex align-items-center justify-center">
-      <img src="assets/otter.png" class="img-fluid rounded-start" aria-hidden="true">
+      <img src="assets/otter.svg" class="img-fluid rounded-start" aria-hidden="true">
     </div>
     <div class="col-8 container p-3">
       <div class="card-bod d-flex flex-column h-100">

apps/showcase/src/components/showcase/configuration/configuration-pres.template.html

@@ -1,7 +1,7 @@
 <div class="card my-3 overflow-hidden">
   <div class="row g-0">
     <div class="col-4 bg-body-tertiary d-flex align-items-center justify-center">
-      <img src="assets/otter.png" class="img-fluid rounded-start" aria-hidden="true">
+      <img src="assets/otter.svg" class="img-fluid rounded-start" aria-hidden="true">
     </div>
     <div class="col-8 container p-3">
       <div class="card-bod d-flex flex-column h-100">

apps/showcase/src/components/showcase/dynamic-content/dynamic-content-pres.template.html

@@ -1,7 +1,7 @@
 <div class="card my-3 overflow-hidden">
   <div class="row g-0">
     <div class="col-4 bg-body-tertiary d-flex align-items-center justify-center">
-      <img [src]="'otter-dynamic.png' | dynamicContent" class="img-fluid rounded-start" aria-hidden="true">
+      <img [src]="'otter-dynamic.svg' | dynamicContent" class="img-fluid rounded-start" aria-hidden="true">
     </div>
     <div class="col-8 container p-3">
       <div class="card-bod d-flex flex-column h-100">

apps/showcase/src/components/showcase/localization/localization-pres.template.html

@@ -1,7 +1,7 @@
 <div class="card my-3 overflow-hidden">
   <div class="row g-0">
     <div class="col-4 bg-body-tertiary d-flex align-items-center justify-center">
-      <img src="assets/otter.png" class="img-fluid rounded-start" aria-hidden="true">
+      <img src="assets/otter.svg" class="img-fluid rounded-start" aria-hidden="true">
     </div>
     <div class="col-8 container p-3">
       <div class="card-bod d-flex flex-column h-100">

apps/showcase/src/components/showcase/rules-engine/rules-engine-pres.template.html

@@ -1,7 +1,7 @@
 <div class="card my-3 overflow-hidden">
   <div class="row g-0">
-    <div class="col-4 bg-body-tertiary d-flex align-items-center justify-center">
-      <img [src]="'otter.png' | dynamicContent" class="img-fluid rounded-start" aria-hidden="true">
+    <div class="col-4 bg-body-tertiary d-flex align-items-center justify-content-center">
+      <img [src]="'otter.svg' | dynamicContent" class="img-fluid rounded-start" aria-hidden="true">
     </div>
     <div class="col-8 container p-3">
       <div class="card-bod d-flex flex-column h-100">

apps/showcase/src/components/utilities/scroll-back-top/scroll-back-top-pres.style.scss

@@ -3,6 +3,7 @@ o3r-scroll-back-top-pres {
   bottom: 2rem;
   right: 2rem;
   opacity: .5;
+  z-index: 1021;
 
   i {
     color: #000;

apps/showcase/src/styles.scss

@@ -1,5 +1,6 @@
 @use '@design-factory/design-factory' with (
-  $prefix: bs-
+  $prefix: bs-,
+  $df-spinner-circumference: 2rem
 );
 @use "bootstrap-icons/font/bootstrap-icons";
 @import "highlight.js/styles/github.css";