adding loading icon to sidebar for model that is being downloaded

exo/tinychat/index.css

@@ -516,6 +516,14 @@ p {
 .model-progress {
   font-size: 0.9em;
   color: var(--secondary-color-transparent);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.model-progress i {
+  font-size: 0.9em;
+  color: var(--primary-color);
 }
 
 /* Adjust main content to accommodate sidebar */

exo/tinychat/index.html

@@ -53,7 +53,15 @@
                         <span><i class="fas fa-spinner fa-spin"></i> Checking download status...</span>
                     </template>
                     <template x-if="!model.loading && model.download_percentage != null">
-                        <span x-text="model.downloaded ? 'Downloaded' : `${Math.round(model.download_percentage)}% downloaded`"></span>
+                        <span>
+                            <!-- Check if there's an active download for this model -->
+                            <template x-if="downloadProgress?.some(p => 
+                                p.repo_id && p.repo_id.toLowerCase().includes(key.toLowerCase()) && !p.isComplete
+                            )">
+                                <i class="fas fa-circle-notch fa-spin"></i>
+                            </template>
+                            <span x-text="model.downloaded ? 'Downloaded' : `${Math.round(model.download_percentage)}% downloaded`"></span>
+                        </span>
                     </template>
                 </div>
                 <template x-if="model.total_size">