优化图库，添加加载动画

templates/assets/images/load/rotating-ball-o.svg

@@ -0,0 +1,10 @@
+<svg width="80px"  height="80px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-disk">
+    <g transform="translate(50,50)">
+      <g ng-attr-transform="scale({{config.scale}})" transform="scale(0.6)">
+        <circle cx="0" cy="0" r="50" ng-attr-fill="{{config.c1}}" fill="#FFA500"></circle>
+        <circle cx="0" ng-attr-cy="{{config.cy}}" ng-attr-r="{{config.r}}" ng-attr-fill="{{config.c2}}" cy="-28" r="15" fill="#fff8eb" transform="rotate(312)">
+          <animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 0 0;360 0 0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform>
+        </circle>
+      </g>
+    </g>
+  </svg>

templates/assets/js/utils.js

@@ -236,6 +236,7 @@ var btf = {
                 })
             }
         ))
+        document.querySelectorAll('#article-container .timeline')[0]?.classList.remove("loadings");
     },
 
     diffDate: (d, more = false) => {

templates/photos.html

@@ -25,8 +25,8 @@
                 </th:block>
 
                 <div id="article-container">
-                    <section class="timeline page-1">
-                        <div class="type-gallery">
+                    <section class="timeline page-1 loadings">
+                        <div class="type-gallery ">
                             <div class="gallery">
                                 <div class="fj-gallery-item"
                                      th:each="photo : ${photoFinder.listBy(param.photo_group_name)}">
@@ -40,6 +40,24 @@
                     </section>
                 </div>
                 <style>
+
+                    #content-inner .loadings .type-gallery {
+                        opacity: 0
+                    }
+
+                    .loadings {
+                        height: 60px;
+                        background-position: center;
+                        background-repeat: no-repeat;
+                        color: #504e4e;
+                        border: none;
+                        background-size: auto 100%;
+                        box-shadow: none;
+                        background-color: inherit;
+                        background-image: none;
+                        background-image: url(/themes/theme-hao/assets/images/load/rotating-ball-o.svg)
+                    }
+
                     #article-container .type-gallery {
                         overflow: hidden;
                         margin-top: 40px;