refactor(angular): lazy loading tabs (#16637)

Fixes #16619

core/src/components/back-button/back-button.tsx

@@ -84,9 +84,8 @@ export class BackButton implements ComponentInterface {
         <span class="button-inner">
           {backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false}></ion-icon>}
           {backButtonText && <span class="button-text">{backButtonText}</span>}
-          {this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
         </span>
-        {this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+        {this.mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
       </button>
     );
   }

core/src/components/menu-button/menu-button.tsx

@@ -54,7 +54,7 @@ export class MenuButton implements ComponentInterface {
           <slot>
             <ion-icon icon={menuIcon} mode={this.mode} color={this.color} lazy={false} />
           </slot>
-          {this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+          {this.mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
         </button>
       </ion-menu-toggle>
     );

core/src/components/popover/animations/ios.enter.ts

@@ -72,9 +72,6 @@ export function iosEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, ev
   // make it pop up if there's room above
   if (targetTop + targetHeight + contentHeight > bodyHeight && targetTop - contentHeight > 0) {
     arrowCSS.top = targetTop - (arrowHeight + 1);
-    console.log(arrowCSS);
-    console.log(targetTop);
-    console.log(contentHeight);
     popoverCSS.top = targetTop - contentHeight - (arrowHeight - 1);
 
     baseEl.className = baseEl.className + ' popover-bottom';

core/src/components/refresher/refresher.tsx

@@ -175,8 +175,6 @@ export class Refresher implements ComponentInterface {
   }
 
   private onStart() {
-    console.log('start');
-
     this.progress = 0;
     this.state = RefresherState.Inactive;
   }

core/src/components/tab-bar/tab-bar.scss

@@ -16,6 +16,10 @@
 
   width: auto;
 
+  padding-bottom: var(--ion-safe-area-bottom, 0);
+
+  border-top: var(--border);
+
   background: var(--background);
   color: var(--color);
 
@@ -41,15 +45,12 @@
 }
 
 :host([slot="top"]) {
+  padding-bottom: 0;
+
+  border-top: 0;
   border-bottom: var(--border);
 }
 
-:host([slot="bottom"]) {
-  padding-bottom: var(--ion-safe-area-bottom, 0);
-
-  border-top: var(--border);
-}
-
 :host(.tabbar-hidden) {
   /* stylelint-disable-next-line declaration-no-important */
   display: none !important;