added img loading screen

src/app/components/main-chat/single-chat/attachments/attachments.component.html

@@ -3,6 +3,7 @@
     @if (['png', 'jpg', 'jpeg', 'gif'].includes(getFileType(filePath))) {
     <img
       src="{{ filePath }}"
+      (load)="onImageLoad()"
       alt="image"
       [ngStyle]="{
         height:
@@ -17,6 +18,7 @@
       <img
         class="otherFiles"
         src="./assets/img/attachments/{{ getFileType(filePath) }}.png"
+        (load)="onImageLoad()"
         alt="image"
         [ngStyle]="{
           height:
@@ -30,6 +32,7 @@
       controls
       preload="auto"
       src="{{ filePath }}"
+      (load)="onImageLoad()"
       [ngStyle]="{
         width:
           openOnSecondaryChat && viewWidth >= RESPONSIVE_THRESHOLD
@@ -42,6 +45,7 @@
       <video
         src="{{ filePath }}"
         alt="video"
+        (load)="onImageLoad()"
         [ngStyle]="{
           height:
             openOnSecondaryChat && viewWidth >= RESPONSIVE_THRESHOLD
@@ -51,5 +55,17 @@
       ></video>
     </div>
     }
+    <img
+      *ngIf="imgIsLoading"
+      src="./../../../../../assets/img/attachments/loading.svg"
+      alt="loading"
+      class="loadingImg"
+      [ngStyle]="{
+        height:
+          openOnSecondaryChat && viewWidth >= RESPONSIVE_THRESHOLD
+            ? '5vw'
+            : '7.5vw'
+      }"
+    />
   </div>
 </div>

src/app/components/main-chat/single-chat/attachments/attachments.component.scss

@@ -6,8 +6,10 @@
   overflow: auto;
   margin-top: 12px;
   .filesView {
+    position: relative;
     cursor: pointer;
     transition: 0.3s ease-in-out;
+    overflow: hidden;
     filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.3));
     img,
     video {
@@ -22,12 +24,29 @@
       width: auto;
       border-radius: 12px;
     }
+    .loadingImg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      animation: spin 10s linear infinite;
+    }
     &:hover {
       filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.35));
     }
   }
 }
 
+/*------------- ANIMATION -------------*/
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 /*------------- RESPONSIVE -------------*/
 
 @media screen and (max-width: 510px) {

src/app/components/main-chat/single-chat/attachments/attachments.component.ts

@@ -17,7 +17,8 @@ export class AttachmentsComponent {
   @Input() filePath: string = '';
   @Input() openOnSecondaryChat: boolean = false;
   @Input() viewWidth: number = 0;
-  loadingUrl: string = './../../../assets/img/loading.svg';
+
+  imgIsLoading = true;
 
   constructor(
     public downloadFilesService: DownloadFilesService,
@@ -27,6 +28,10 @@ export class AttachmentsComponent {
 
   RESPONSIVE_THRESHOLD = this.sharedService.RESPONSIVE_THRESHOLD;
 
+  onImageLoad() {
+    this.imgIsLoading = false;
+  }
+
   /**
    * Gets the file type from the given file name.
    * @param {string} file - The name of the file.

src/app/components/main-chat/single-chat/single-chat.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { User } from '../../../interface/user.interface';
 import { Chat, ChatAnswers } from '../../../interface/chat.interface';
 import { ChatContentComponent } from '../chat-content/chat-content.component';
@@ -54,8 +54,6 @@ export class SingleChatComponent {
   isMsgEditFormOpen: boolean = false;
   firstLoadOptionMenu: boolean = false;
 
-  filePath: string | undefined = '';
-
   constructor(
     public chatService: ChatService,
     public channelService: ChatService,
@@ -156,7 +154,7 @@ export class SingleChatComponent {
     );
 
     if (inputDate.toDateString() === currentDate.toDateString()) {
-      return this.translateService.instant('months.today');
+      return this.translateService.instant('weekdays.today');
     } else {
       return `${dayNumber} ${month}`;
     }