fix: 瀑布流加载细节优化 & 增加请求卡片的 loading 动画.

src/Content.svelte

@@ -31,6 +31,9 @@
   /**上次搜索请求头封装对象*/
   let lastSearchParam = null;
 
+  /**瀑布流底部检测距离 320 | 10*/
+  const distance = 10;
+
   // -----------------------------
   // 各种请求封装头 & 请求函数
 
@@ -315,13 +318,13 @@
     let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
 
     // PC 端
-    // if (clientHeight > 0 && scrollTop > 0 && scrollTop + clientHeight > scrollHeight - 10.0) debouncedContinue();
+    // if (clientHeight > 0 && scrollTop > 0 && scrollTop + clientHeight > scrollHeight - distance) debouncedContinue();
 
     // 手机端
-    // if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 10.0) debouncedContinue();
+    // if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - distance) debouncedContinue();
 
-    let pc_debounced = clientHeight > 0 && scrollTop > 0 && scrollTop + clientHeight > scrollHeight - 10.0;
-    let phone_debounced = window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 10.0;
+    let pc_debounced = clientHeight > 0 && scrollTop > 0 && scrollTop + clientHeight > scrollHeight - distance;
+    let phone_debounced = window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - distance;
     if (pc_debounced || phone_debounced) {
       // toast.push(pc_debounced ? 'pc' : 'phone');
       debouncedContinue();
@@ -337,10 +340,11 @@
 <!-- Open the modal using ID.showModal() method -->
 <!-- <button class="btn" onclick="globalModal.showModal()">open modal</button> -->
 
+<!-- NOTE: 游戏详情预览模态框 -->
 <dialog id="globalModal" class="modal focus:outline-none">
   {#if $_detailWindow}
     <div class="globalModal max-[1024px]:w-[98vw] max-[1024px]:max-w-[98vw]" transition:fade={{ delay: 0, duration: 500 }}>
-      <!-- NOTE: 按钮退出详情 -->
+      <!-- |-- NOTE: 按钮退出详情 -->
       <form method="dialog">
         <button
           on:click={() => {
@@ -349,7 +353,7 @@
           class="btn btn-sm round-box btn-ghost absolute right-2 top-2">✕</button
         >
       </form>
-      <!-- NOTE: Transition -->
+      <!-- |-- NOTE: Transition -->
       {#if $_detailPics.length}
         <div class="carousel w-full" style="height: calc(80vh - 4rem - 3rem - 0.5rem);">
           {#each $_detailPics as pic, index}
@@ -367,13 +371,13 @@
           {/each}
         </div>
       {:else}
-        <!-- NOTE: loading -->
+        <!-- |-- NOTE: loading -->
         <div class="h-full w-full flex justify-center items-center">
           <span class="loading loading-infinity loading-lg" />
         </div>
       {/if}
     </div>
-    <!-- NOTE: 边框退出详情 -->
+    <!-- |-- NOTE: 边框退出详情 -->
     <form method="dialog" class="modal-backdrop">
       <button
         on:click={() => {
@@ -384,6 +388,7 @@
   {/if}
 </dialog>
 
+<!-- NOTE: 游戏卡片主渲染区 -->
 {#if List.length}
   <div class="cardContainer justify-evenly gap-4 my-3" transition:fade={{ delay: 0, duration: 300 }}>
     <!-- 示例卡片, 留着 -->
@@ -408,6 +413,13 @@
   </div>
 {/if}
 
+<!-- NOTE: 加载卡片 Loading 区 -->
+{#if isSearching}
+  <div class="h-full w-full flex justify-center items-center" transition:fade={{ delay: 0, duration: 300 }}>
+    <span class="loading loading-infinity loading-lg" />
+  </div>
+{/if}
+
 <style>
   /* NOTE: 对 Modal 的究极魔改, 很不容易. */
   .globalModal {