> git show --textconv :src/app/pages/publications/view-publications/publication-detail/publication-detail.page.ts

src/app/pages/chat/chat.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
@@ -7,14 +7,17 @@ import { IonicModule } from '@ionic/angular';
 import { ChatPageRoutingModule } from './chat-routing.module';
 
 import { ChatPage } from './chat.page';
+import { SharedModule } from 'src/app/shared/shared.module';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    ChatPageRoutingModule
+    SharedModule,
+    ChatPageRoutingModule,
   ],
-  declarations: [ChatPage]
+  declarations: [ChatPage],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class ChatPageModule {}

src/app/pages/chat/chat.page.html

@@ -1,12 +1,24 @@
 <ion-header>
-  <ion-toolbar>
-    <ion-title>Chat</ion-title>
-    <ion-icon slot="end" src="assets/images/icons-chat-new-group.svg" class="iconschatnew-group"></ion-icon>
-    <ion-icon slot="end" src="assets/images/icons-chat-new-conversation.svg" class="iconschatnew-conversation" [routerLink]="['/home/chat/newchat']"></ion-icon>
+  <app-header></app-header>
+</ion-header>
+<ion-header  class="ion-no-border">
+  <ion-toolbar class="bg-blue">
+    <div class="main-header">
+      <div class="title-content">
+        <div class="div-title">
+          <ion-label class="title">Chat</ion-label>
+        </div>
+        <div class="div-icon">
+          <ion-icon slot="end" src="assets/images/icons-chat-new-group.svg" ></ion-icon>
+          <ion-icon slot="end" src="assets/images/icons-chat-new-conversation.svg" [routerLink]="['/home/chat/newchat']"></ion-icon>
+        </div>
+      </div>
+    </div>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
+  <div class="main-content">
   <ion-toolbar >
     <ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
       <ion-segment-button value="Contactos">
@@ -17,8 +29,11 @@
       </ion-segment-button>
     </ion-segment>
   </ion-toolbar>
+  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+  </ion-refresher>
   <div [ngSwitch]="segment">
-    <ion-list *ngSwitchCase="'Contactos'" >
+    <ion-list *ngSwitchCase="'Contactos'">
       <ion-item-group>
         <ion-item-sliding>
             <ion-item *ngFor="let user of userConnectedList" (click)="starConversation(user)"> 
@@ -46,6 +61,6 @@
       
     </ion-list>
   </div>
-
+</div>
 </ion-content>
 

src/app/pages/chat/chat.page.scss

@@ -20,4 +20,51 @@
   width: 40px;
   height: 40px;
   object-fit: contain;
+}
+.main-header{
+  width: 100%; /* 400px */
+  height: 100%;
+  font-family: Roboto;
+  border-top-left-radius: 25px;
+  border-top-right-radius: 25px;
+  background-color: #fff;
+  overflow:hidden;
+  padding: 30px 20px 0px 20px;
+  color:#000;
+  transform: translate3d(0, 1px, 0);
+  
+  .title-content{
+    width: 360px;
+    margin: 0px auto;
+    overflow: auto;
+    padding: 0 !important;
+    background: #fff;
+  }
+  .div-title{
+    padding: 0!important;
+    float: left;
+  }
+  .title{
+    font-size: 25px;
+  }
+  .div-icon{
+    width: 112px;
+    float: right;
+    font-size: 35px;
+    overflow: auto;
+    padding: 1px;
+  }
+  .div-icon ion-icon{
+    float: right;
+    padding-left: 20px;
+  }
+}
+.main-content{
+  width: 100%; /* 400px */
+  height: 100%;
+  font-family: Roboto;
+  margin: 0 auto;
+  background-color: #fff;
+  overflow:auto;
+  padding: 15px 20px 0 20px;
 }

src/app/pages/chat/chat.page.ts

@@ -10,6 +10,7 @@ import { ConversationPage } from './conversation/conversation.page';
   styleUrls: ['./chat.page.scss'],
 })
 export class ChatPage implements OnInit {
+  showLoader: boolean;
   loggedUser: any;
   /* Set segment variable */
   segment:string;
@@ -24,28 +25,33 @@ export class ChatPage implements OnInit {
 
   ngOnInit() {
     this.segment = "Contactos";
-    this.authService.userData$.subscribe((res:any)=>{
-      this.loggedUser=res;
-    });
+    this.doRefresh();
+    
+  }
+  onSegmentChange(){
+    this.doRefresh();
+  }
+  doRefresh(){
     this.getGroups();
     this.getConnectedUsers();
   }
-  onSegmentChange(){
-    this.RefreshEvents();
-  }
-  RefreshEvents(){}
   getGroups(){
+    this.showLoader = true;
     this.result = this.chatService.getAllPrivateGroups().subscribe((res:any)=>{
       this.groupList = res.groups;
-      /* console.log(this.groupList); */
+      this.showLoader = false;
     }); 
   }
+
   getConnectedUsers(){
+    this.showLoader = true;
     this.result = this.chatService.getAllConnectedUsers().subscribe((res:any)=>{
       this.userConnectedList = res.users;
       console.log(this.userConnectedList);
+      this.showLoader = false;
     }); 
   }
+
   async starConversation(selectedUser) {
     const modal = await this.modalController.create({
       component: ConversationPage,