fix: 加载中图标修复

.gitignore

@@ -37,3 +37,4 @@ tests/fixtures/
 
 # SpecStory explanation file
 .specstory/.what-is-this.md
+AGENTS.md

assets/style.css

@@ -950,12 +950,71 @@ body .content.expanded {
 
 .site-card .icon-placeholder,
 .site-card .icon-fallback {
-    display: inline-flex;
+    display: inline-block;
-    align-items: center;
-    justify-content: center;
     width: 1.8rem;
     height: 1.8rem;
+    margin-bottom: 1rem;
+    border-radius: 4px;
     flex-shrink: 0;
+    vertical-align: middle;
+    text-align: center;
+    line-height: 1.8rem;
+    font-size: 1.8rem;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+/* 确保图标容器在加载过程中保持固定尺寸 */
+.site-card .icon-container {
+    display: inline-block;
+    width: 1.8rem;
+    height: 1.8rem;
+    margin-bottom: 1rem;
+    position: relative;
+    vertical-align: middle;
+}
+
+.site-card .icon-container .favicon-icon,
+.site-card .icon-container .icon-placeholder,
+.site-card .icon-container .icon-fallback {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin-bottom: 0;
+}
+
+/* 优化图标切换动画 */
+.site-card .icon-container .favicon-icon {
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.site-card .icon-container .favicon-icon.loaded {
+    opacity: 1;
+}
+
+.site-card .icon-container .favicon-icon.error {
+    display: none;
+}
+
+.site-card .icon-container .icon-placeholder {
+    opacity: 1;
+    transition: opacity 0.3s ease;
+}
+
+.site-card .icon-container .icon-placeholder.hidden {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.site-card .icon-container .icon-fallback {
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.site-card .icon-container .icon-fallback.visible {
+    opacity: 1;
 }
 
 .site-card:hover i {

templates/components/site-card.hbs

@@ -8,17 +8,18 @@
    data-description="{{#if description}}{{description}}{{else}}{{url}}{{/if}}">
     {{#ifEquals @root.icons.mode "favicon"}}
       {{#ifHttpUrl url}}
-        <i class="fas fa-circle-notch fa-spin icon-placeholder" aria-hidden="true"></i>
+        <div class="icon-container">
-        <img
+          <i class="fas fa-circle-notch fa-spin icon-placeholder" aria-hidden="true"></i>
-          class="favicon-icon"
+          <img
-          src="https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url={{encodeURIComponent url}}&size=32"
+            class="favicon-icon"
-          alt="{{name}} favicon"
+            src="https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url={{encodeURIComponent url}}&size=32"
-          loading="lazy"
+            alt="{{name}} favicon"
-          style="opacity:0;"
+            loading="lazy"
-          onload="this.style.opacity='1'; this.previousElementSibling.style.display='none';"
+            onload="this.classList.add('loaded'); this.previousElementSibling.classList.add('hidden');"
-          onerror="this.style.display='none'; this.previousElementSibling.style.display='none'; this.nextElementSibling.style.display='inline-block';"
+            onerror="this.classList.add('error'); this.previousElementSibling.classList.add('hidden'); this.nextElementSibling.classList.add('visible');"
-        />
+          />
-        <i class="fas fa-link icon-fallback" aria-hidden="true" style="display:none;"></i>
+          <i class="fas fa-link icon-fallback" aria-hidden="true"></i>
+        </div>
       {{else}}
         <i class="{{#if icon}}{{icon}}{{else}}fas fa-link{{/if}}"></i>
       {{/ifHttpUrl}}