diff --git a/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.html b/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.html
index f8c04f2f6cfe..aff0c96b795a 100644
--- a/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.html
+++ b/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.html
@@ -25,7 +25,7 @@
-
+
diff --git a/ext/search_kit/ang/crmSearchDisplay.ang.php b/ext/search_kit/ang/crmSearchDisplay.ang.php
index a70d2f1ec263..0dbdeb3526e2 100644
--- a/ext/search_kit/ang/crmSearchDisplay.ang.php
+++ b/ext/search_kit/ang/crmSearchDisplay.ang.php
@@ -9,6 +9,9 @@
'partials' => [
'ang/crmSearchDisplay',
],
+ 'css' => [
+ 'css/crmSearchDisplay.css',
+ ],
'basePages' => [],
'requires' => ['api4', 'ngSanitize'],
'exports' => [
diff --git a/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGrid.html b/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGrid.html
index 5d8c3b719642..46c09304ed63 100644
--- a/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGrid.html
+++ b/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGrid.html
@@ -2,7 +2,7 @@
diff --git a/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGridLoading.html b/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGridLoading.html
new file mode 100644
index 000000000000..b63dd058f7fa
--- /dev/null
+++ b/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGridLoading.html
@@ -0,0 +1,4 @@
+
+
diff --git a/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayList.html b/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayList.html
index 5428a7713d1e..1b20b52b6d18 100644
--- a/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayList.html
+++ b/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayList.html
@@ -1,6 +1,6 @@
diff --git a/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayListLoading.html b/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayListLoading.html
new file mode 100644
index 000000000000..af84f53ea46e
--- /dev/null
+++ b/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayListLoading.html
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html b/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html
index 5857239c1368..b5e28566f74d 100644
--- a/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html
+++ b/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html
@@ -15,7 +15,7 @@
-
+
diff --git a/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTableLoading.html b/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTableLoading.html
new file mode 100644
index 000000000000..a3d01656ae73
--- /dev/null
+++ b/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTableLoading.html
@@ -0,0 +1,9 @@
+
+
+
+
+ |
+
+
+ |
+
diff --git a/ext/search_kit/css/crmSearchDisplay.css b/ext/search_kit/css/crmSearchDisplay.css
new file mode 100644
index 000000000000..631f3d74a008
--- /dev/null
+++ b/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%;
+ }
+}
diff --git a/ext/search_kit/css/crmSearchTasks.css b/ext/search_kit/css/crmSearchTasks.css
index dbd48542e1c2..89fada1d5909 100644
--- a/ext/search_kit/css/crmSearchTasks.css
+++ b/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;
-}