preload redacted and visibility hidden (#1584)

* preload redacted and visibility hidden

* remove comment

* update patchdb

Co-authored-by: Lucy Cifferello <12953208+elvece@users.noreply.github.com>

frontend/projects/ui/src/app/app/preloader/preloader.component.html

@@ -1,74 +1,79 @@
-<!-- Ionicons -->
-<ion-icon *ngFor="let icon of icons" [name]="icon"></ion-icon>
+<div style="display: none">
+  <!-- Ionicons -->
+  <ion-icon *ngFor="let icon of icons" [name]="icon"></ion-icon>
 
-<!-- 3rd party components -->
-<qr-code value="hello"></qr-code>
-<swiper>
-  <ng-template swiperSlide>Slide 1</ng-template>
-</swiper>
+  <!-- 3rd party components -->
+  <qr-code value="hello"></qr-code>
+  <swiper>
+    <ng-template swiperSlide>Slide 1</ng-template>
+  </swiper>
 
-<!-- Ionic components -->
-<ion-action-sheet></ion-action-sheet>
-<ion-alert></ion-alert>
-<ion-back-button></ion-back-button>
-<ion-badge></ion-badge>
-<ion-button></ion-button>
-<ion-buttons></ion-buttons>
-<ion-card></ion-card>
-<ion-card-content></ion-card-content>
-<ion-card-header></ion-card-header>
-<ion-checkbox></ion-checkbox>
-<ion-content></ion-content>
-<ion-footer></ion-footer>
-<ion-grid></ion-grid>
-<ion-header></ion-header>
-<ion-popover></ion-popover>
-<ion-content>
-  <ion-refresher slot="fixed"></ion-refresher>
-  <ion-refresher-content pullingContent="lines"></ion-refresher-content>
-  <ion-infinite-scroll></ion-infinite-scroll>
-  <ion-infinite-scroll-content
-    loadingSpinner="lines"
-  ></ion-infinite-scroll-content>
-</ion-content>
-<ion-input></ion-input>
-<ion-item></ion-item>
-<ion-item-divider></ion-item-divider>
-<ion-item-group></ion-item-group>
-<ion-label></ion-label>
-<ion-label style="font-weight: bold"></ion-label>
-<ion-list></ion-list>
-<ion-loading></ion-loading>
-<ion-modal></ion-modal>
-<ion-note></ion-note>
-<ion-radio></ion-radio>
-<ion-reorder></ion-reorder>
-<ion-row></ion-row>
-<ion-searchbar></ion-searchbar>
-<ion-segment></ion-segment>
-<ion-segment-button></ion-segment-button>
-<ion-select></ion-select>
-<ion-select-option></ion-select-option>
-<ion-spinner name="lines"></ion-spinner>
-<ion-text></ion-text>
-<ion-text><strong>load bold font</strong></ion-text>
-<ion-title></ion-title>
-<ion-toast></ion-toast>
-<ion-toggle></ion-toggle>
-<ion-toolbar></ion-toolbar>
-<ion-menu-button></ion-menu-button>
+  <!-- Ionic components -->
+  <ion-action-sheet></ion-action-sheet>
+  <ion-alert></ion-alert>
+  <ion-back-button></ion-back-button>
+  <ion-badge></ion-badge>
+  <ion-button></ion-button>
+  <ion-buttons></ion-buttons>
+  <ion-card></ion-card>
+  <ion-card-content></ion-card-content>
+  <ion-card-header></ion-card-header>
+  <ion-checkbox></ion-checkbox>
+  <ion-content></ion-content>
+  <ion-footer></ion-footer>
+  <ion-grid></ion-grid>
+  <ion-header></ion-header>
+  <ion-popover></ion-popover>
+  <ion-content>
+    <ion-refresher slot="fixed"></ion-refresher>
+    <ion-refresher-content pullingContent="lines"></ion-refresher-content>
+    <ion-infinite-scroll></ion-infinite-scroll>
+    <ion-infinite-scroll-content
+      loadingSpinner="lines"
+    ></ion-infinite-scroll-content>
+  </ion-content>
+  <ion-input></ion-input>
+  <ion-item></ion-item>
+  <ion-item-divider></ion-item-divider>
+  <ion-item-group></ion-item-group>
+  <ion-label></ion-label>
+  <ion-label style="font-weight: bold"></ion-label>
+  <ion-list></ion-list>
+  <ion-loading></ion-loading>
+  <ion-modal></ion-modal>
+  <ion-note></ion-note>
+  <ion-radio></ion-radio>
+  <ion-reorder></ion-reorder>
+  <ion-row></ion-row>
+  <ion-searchbar></ion-searchbar>
+  <ion-segment></ion-segment>
+  <ion-segment-button></ion-segment-button>
+  <ion-select></ion-select>
+  <ion-select-option></ion-select-option>
+  <ion-spinner name="lines"></ion-spinner>
+  <ion-text></ion-text>
+  <ion-text><strong>load bold font</strong></ion-text>
+  <ion-title></ion-title>
+  <ion-toast></ion-toast>
+  <ion-toggle></ion-toggle>
+  <ion-toolbar></ion-toolbar>
+  <ion-menu-button></ion-menu-button>
 
-<!-- fonts -->
-<p style="font-family: Montserrat">a</p>
-<p style="font-family: Montserrat; font-weight: bold">a</p>
-<p style="font-family: Montserrat; font-weight: 100">a</p>
-<p style="font-family: Open Sans">a</p>
-<p style="font-family: Open Sans; font-weight: bold">a</p>
-<p style="font-family: Open Sans; font-weight: 100">a</p>
+  <!-- images -->
+  <img src="assets/img/logo.png" />
+  <img src="assets/img/icons/snek.png" />
+  <img src="assets/img/icons/wifi-1.png" />
+  <img src="assets/img/icons/wifi-2.png" />
+  <img src="assets/img/icons/wifi-3.png" />
+</div>
 
-<!-- images -->
-<img src="assets/img/logo.png" />
-<img src="assets/img/icons/snek.png" />
-<img src="assets/img/icons/wifi-1.png" />
-<img src="assets/img/icons/wifi-2.png" />
-<img src="assets/img/icons/wifi-3.png" />
+<div style="visibility: hidden; height: 0">
+  <!-- fonts -->
+  <p style="font-family: Montserrat">a</p>
+  <p style="font-family: Montserrat; font-weight: bold">a</p>
+  <p style="font-family: Montserrat; font-weight: 100">a</p>
+  <p style="font-family: Open Sans">a</p>
+  <p style="font-family: Open Sans; font-weight: bold">a</p>
+  <p style="font-family: Open Sans; font-weight: 100">a</p>
+  <p style="font-family: Redacted">a</p>
+</div>

frontend/projects/ui/src/app/app/preloader/preloader.component.ts

@@ -87,7 +87,6 @@ const ICONS = [
 @Component({
   selector: 'section[appPreloader]',
   templateUrl: 'preloader.component.html',
-  styles: [':host { display: none }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PreloaderComponent {

frontend/projects/ui/src/app/components/form-object/form-object.component.html

@@ -85,7 +85,6 @@
             >
             </ion-input>
           </ng-template>
-          <!-- removing mask button until proper solution implemented -->
           <ion-button
             *ngIf="spec.type === 'string' && spec.masked"
             slot="end"