如何将ajax throbber添加到我的主题中？

Question

我在经典的基础上创作了一个新的主题。

base theme: classy
core_version_requirement: ^8 || ^9

regions:
  header: 'Header'
  content: 'Content'
  footer: 'Footer'

libraries-extend: {}

libraries:
  - my_theme/global

global:
  version: VERSION
  header: TRUE
  js:
    dist/js/app.js: { minified: true }
  dependencies:
    - core/jquery
    - core/drupal
    - core/ajax
    - core/drupalSettings
    - core/jquery.once
  css:
    theme:
      dist/css/app.css: { minified: true }

无论我做什么，我都不会在视图中或无限滚动加载时获得AJAX加载指示。我遗漏了什么？

我在Drupal中定义了什么来显示或使用我自己的跳动标记？根本不能用谷歌搜索这个东西。

如果我需要自己在一个新的地方处理这个问题，有什么资源可以让我了解如何创建一个定制的ajax throbber呢？

Answer 1

下面是在Drupal请求之前和之后插入一些js逻辑的方法。

Drupal.Ajax.prototype.ajax_before_send_original = Drupal.Ajax.prototype.beforeSend;

Drupal.Ajax.prototype.beforeSend = function (xmlhttprequest, options) {
  Drupal.Ajax.prototype.ajax_before_send_original.call(this, xmlhttprequest, options);
  options.complete_original = options.complete;
  options.complete = Drupal.Ajax.prototype.options_complete;

  // BEFORE AJAX LOGIC
  // e.g. jQuery('.listing-ajax-overlay').addClass('active');
}

Drupal.Ajax.prototype.options_complete = function (xmlhttprequest, status) {
  this.complete_original.call(this, xmlhttprequest, status);

  // AFTER AJAX LOGIC
  // e.g. jQuery('.listing-ajax-overlay').removeClass('active');
}