added loading animation

Author: joelgarthe

frontend/src/index.css

@@ -50,6 +50,23 @@
   animation: loading-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
+@keyframes show-after-delay {
+  0%, 80% {
+    opacity: 0;
+    max-height: 0em;
+  }
+  93.3% {
+    opacity: 0;
+    max-height: 1.5em;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.animate-show-after-7s {
+  animation: show-after-delay 5.5s forwards;
+}
+
 .white-shadow {
   box-shadow: 0 -20px 16px 4px white;
 }

frontend/src/pages/chat/conversation/FileItem.tsx

@@ -38,6 +38,7 @@ export const FileItemComponent = ({ file, onRemove, loading }: FileItemProps) =>
         <div className="min-w-0 flex-grow">
           <div className="flex flex-col">
             <span className="truncate text-sm font-medium">{fileName}</span>
+            <span className="animate-show-after-7s truncate text-sm font-medium text-orange-800 italic">Bitte warten...</span>
           </div>
         </div>