Merge pull request #22019 from colemanw/searchKitLoading

SearchKit - Animated loading skeleton

ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.html

@@ -25,7 +25,7 @@
         </th>
       </tr>
     </thead>
-    <tbody ng-include="'~/crmSearchDisplayTable/crmSearchDisplayTableBody.html'"></tbody>
+    <tbody ng-include="'~/crmSearchDisplayTable/crmSearchDisplayTable' + ($ctrl.loading ? 'Loading' : 'Body') + '.html'"></tbody>
   </table>
   <div ng-include="'~/crmSearchDisplay/Pager.html'"></div>
 </div>

ext/search_kit/ang/crmSearchDisplay.ang.php

@@ -9,6 +9,9 @@
   'partials' => [
     'ang/crmSearchDisplay',
   ],
+  'css' => [
+    'css/crmSearchDisplay.css',
+  ],
   'basePages' => [],
   'requires' => ['api4', 'ngSanitize'],
   'exports' => [

ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGrid.html

@@ -2,7 +2,7 @@
   <div ng-include="'~/crmSearchDisplay/SearchButton.html'" ng-if="$ctrl.settings.button"></div>
   <div
     class="crm-search-display-grid-container crm-search-display-grid-layout-{{$ctrl.settings.colno}}"
-    ng-include="'~/crmSearchDisplayGrid/crmSearchDisplayGridItems.html'"
+    ng-include="'~/crmSearchDisplayGrid/crmSearchDisplayGrid' + ($ctrl.loading ? 'Loading' : 'Items') + '.html'"
   ></div>
   <div ng-include="'~/crmSearchDisplay/Pager.html'"></div>
 </div>

ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGridLoading.html

@@ -0,0 +1,4 @@
+<!-- Placeholder shown during ajax loading -->
+<div ng-repeat="num in [1,2,3,4,5] track by $index" style="width: 100px; height: 50px;">
+  <div class="crm-search-loading-placeholder"></div>
+</div>

ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayList.html

@@ -1,6 +1,6 @@
 <div class="crm-search-display crm-search-display-list">
   <div ng-include="'~/crmSearchDisplay/SearchButton.html'" ng-if="$ctrl.settings.button"></div>
-  <ol ng-if=":: $ctrl.settings.style === 'ol'" ng-include="'~/crmSearchDisplayList/crmSearchDisplayListItems.html'" ng-style="{'list-style': $ctrl.settings.symbol}"></ol>
-  <ul ng-if=":: $ctrl.settings.style !== 'ol'" ng-include="'~/crmSearchDisplayList/crmSearchDisplayListItems.html'" ng-style="{'list-style': $ctrl.settings.symbol}"></ul>
+  <ol ng-if=":: $ctrl.settings.style === 'ol'" ng-include="'~/crmSearchDisplayList/crmSearchDisplayList' + ($ctrl.loading ? 'Loading' : 'Items') + '.html'" ng-style="{'list-style': $ctrl.settings.symbol}"></ol>
+  <ul ng-if=":: $ctrl.settings.style !== 'ol'" ng-include="'~/crmSearchDisplayList/crmSearchDisplayList' + ($ctrl.loading ? 'Loading' : 'Items') + '.html'" ng-style="{'list-style': $ctrl.settings.symbol}"></ul>
   <div ng-include="'~/crmSearchDisplay/Pager.html'"></div>
 </div>

ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayListLoading.html

@@ -0,0 +1,4 @@
+<!-- Placeholder shown during ajax loading -->
+<li ng-repeat="num in [1,2,3,4,5] track by $index">
+  <div class="crm-search-loading-placeholder"></div>
+</li>

ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html

@@ -15,7 +15,7 @@
         </th>
       </tr>
     </thead>
-    <tbody ng-include="'~/crmSearchDisplayTable/crmSearchDisplayTableBody.html'"></tbody>
+    <tbody ng-include="'~/crmSearchDisplayTable/crmSearchDisplayTable' + ($ctrl.loading ? 'Loading' : 'Body') + '.html'"></tbody>
   </table>
   <div ng-include="'~/crmSearchDisplay/Pager.html'"></div>
 </div>

ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTableLoading.html

@@ -0,0 +1,9 @@
+<!-- Placeholder table rows shown during ajax loading -->
+<tr ng-repeat="num in [1,2,3,4,5] track by $index">
+  <td ng-if=":: $ctrl.settings.actions">
+    <input type="checkbox" disabled>
+  </td>
+  <td ng-repeat="col in $ctrl.settings.columns">
+    <div class="crm-search-loading-placeholder"></div>
+  </td>
+</tr>

ext/search_kit/css/crmSearchDisplay.css

@@ -0,0 +1,40 @@
+/* Sortable headers */
+#bootstrap-theme .crm-search-display th[ng-click] {
+  cursor: pointer;
+}
+#bootstrap-theme .crm-search-display th i.fa-sort-desc,
+#bootstrap-theme .crm-search-display th i.fa-sort-asc {
+  color: #1a5a82;
+}
+#bootstrap-theme .crm-search-display th:not(:hover) i.fa-sort {
+  opacity: .5;
+}
+
+/* Loading placeholders */
+#bootstrap-theme .crm-search-loading-placeholder {
+  height: 2em;
+  width: 80%;
+  position: relative;
+  overflow: hidden;
+  background-color: rgba(0,0,0,.04);
+  display: inline-block;
+}
+#bootstrap-theme .crm-search-loading-placeholder::before {
+  content: '';
+  display: block;
+  position: absolute;
+  left: -150px;
+  top: 0;
+  height: 100%;
+  width: 150px;
+  background: linear-gradient(to right, transparent 0%, rgba(0,0,0,.1) 50%, transparent 100%);
+  animation: searchKitLoadingAnimation 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
+}
+@keyframes searchKitLoadingAnimation {
+  from {
+    left: -150px;
+  }
+  to   {
+    left: 100%;
+  }
+}

ext/search_kit/css/crmSearchTasks.css

@@ -26,13 +26,3 @@
   bottom: -22px;
   left: 0;
 }
-#bootstrap-theme .crm-search-display th[ng-click] {
-  cursor: pointer;
-}
-#bootstrap-theme .crm-search-display th i.fa-sort-desc,
-#bootstrap-theme .crm-search-display th i.fa-sort-asc {
-  color: #1a5a82;
-}
-#bootstrap-theme .crm-search-display th:not(:hover) i.fa-sort {
-  opacity: .5;
-}