Merge pull request #23702 from colemanw/loadingPlaceholders

SearchKit - Make loading placeholders configurable

ext/search_kit/Civi/Api4/Action/SearchDisplay/GetDefault.php

@@ -72,6 +72,7 @@ public function _run(\Civi\Api4\Generic\Result $result) {
           'show_count' => TRUE,
           'expose_limit' => TRUE,
         ],
+        'placeholder' => 5,
         'sort' => [],
         'columns' => [],
       ],

ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminPlaceholderConfig.component.js

@@ -0,0 +1,27 @@
+(function(angular, $, _) {
+  "use strict";
+
+  angular.module('crmSearchAdmin').component('searchAdminPlaceholderConfig', {
+    bindings: {
+      display: '<',
+    },
+    templateUrl: '~/crmSearchAdmin/displays/common/searchAdminPlaceholderConfig.html',
+    controller: function($scope) {
+      var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'),
+        ctrl = this;
+
+      this.$onInit = function() {
+        // Legacy support
+        if (!('placeholder' in this.display.settings)) {
+          this.display.settings.placeholder = 5;
+        }
+      };
+
+      this.togglePlaceholder = function() {
+        this.display.settings.placeholder = this.display.settings.placeholder ? 0 : 5;
+      };
+
+    }
+  });
+
+})(angular, CRM.$, CRM._);

ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminPlaceholderConfig.html

@@ -0,0 +1,9 @@
+<div class="form-inline">
+  <div class="checkbox-inline form-control" title="{{:: ts('Show wireframe placeholder results while waiting for data') }}">
+    <label>
+      <input type="checkbox" ng-checked="$ctrl.display.settings.placeholder" ng-click="$ctrl.togglePlaceholder()">
+      <span>{{:: ts('Loading Placeholders') }}</span>
+    </label>
+    <input ng-if="$ctrl.display.settings.placeholder" type="number" min="0" step="1" class="form-control" ng-model="$ctrl.display.settings.placeholder" ng-model-options="{updateOn: 'blur'}">
+  </div>
+</div>

ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.html

@@ -11,6 +11,7 @@
     <div class="form-group" ng-include="'~/crmSearchAdmin/displays/common/searchButtonConfig.html'"></div>
   </div>
   <search-admin-pager-config display="$ctrl.display"></search-admin-pager-config>
+  <search-admin-placeholder-config display="$ctrl.display"></search-admin-placeholder-config>
 </fieldset>
 <fieldset class="crm-search-admin-edit-columns-wrapper">
   <legend>

ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html

@@ -15,6 +15,7 @@
     <div class="form-group" ng-include="'~/crmSearchAdmin/displays/common/searchButtonConfig.html'"></div>
   </div>
   <search-admin-pager-config display="$ctrl.display"></search-admin-pager-config>
+  <search-admin-placeholder-config display="$ctrl.display"></search-admin-placeholder-config>
 </fieldset>
 <fieldset class="crm-search-admin-edit-columns-wrapper">
   <legend>

ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html

@@ -28,6 +28,7 @@
   </div>
   <search-admin-css-rules label="{{:: ts('Row Style') }}" item="$ctrl.display.settings"></search-admin-css-rules>
   <search-admin-pager-config display="$ctrl.display"></search-admin-pager-config>
+  <search-admin-placeholder-config display="$ctrl.display"></search-admin-placeholder-config>
   <div class="form-inline crm-search-admin-flex-row" title="{{:: ts('Text to display if the table is empty.') }}">
     <label for="crm-search-admin-display-no-results-text">{{:: ts('No Results Text') }}</label>
     <input class="form-control crm-flex-1" id="crm-search-admin-display-no-results-text" ng-model="$ctrl.display.settings.noResultsText" placeholder="{{:: ts('None found.') }}">

ext/search_kit/ang/crmSearchDisplay/traits/searchDisplayBaseTrait.service.js

@@ -21,6 +21,11 @@
         this.limit = this.settings.limit;
         this.sort = this.settings.sort ? _.cloneDeep(this.settings.sort) : [];
         this.seed = Date.now();
+        this.placeholders = [];
+        var placeholderCount = 'placeholder' in this.settings ? this.settings.placeholder : 5;
+        for (var p=0; p < placeholderCount; ++p) {
+          this.placeholders.push({});
+        }
 
         this.getResults = _.debounce(function() {
           $scope.$apply(function() {

ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGridLoading.html

@@ -1,4 +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 ng-repeat="num in $ctrl.placeholders" style="width: 100px; height: 50px;">
   <div class="crm-search-loading-placeholder"></div>
 </div>

ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayListLoading.html

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

ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTableLoading.html

@@ -1,5 +1,5 @@
 <!-- Placeholder table rows shown during ajax loading -->
-<tr ng-repeat="num in [1,2,3,4,5] track by $index">
+<tr ng-repeat="num in $ctrl.placeholders">
   <td ng-if=":: $ctrl.hasExtraFirstColumn()">
     <input ng-if=":: $ctrl.settings.actions" type="checkbox" disabled>
   </td>

ext/search_kit/css/crmSearchDisplay.css

@@ -26,7 +26,7 @@
   width: 80%;
   position: relative;
   overflow: hidden;
-  background-color: rgba(0,0,0,.04);
+  background-color: rgba(0,0,0,.03);
   display: inline-block;
 }
 #bootstrap-theme .crm-search-loading-placeholder::before {
@@ -37,7 +37,7 @@
   top: 0;
   height: 100%;
   width: 150px;
-  background: linear-gradient(to right, transparent 0%, rgba(0,0,0,.1) 50%, transparent 100%);
+  background: linear-gradient(to right, transparent 0%, rgba(0,0,0,.05) 50%, transparent 100%);
   animation: searchKitLoadingAnimation 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
 }
 @keyframes searchKitLoadingAnimation {