How to add an ajax throbber to my theme?

mevsme

12/7/23, 2:40 PM

I created a new theme based on Classy.

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 }

No matter what I do - I don't get AJAX loading indication in my views or when infinite scroll loads. What am I missing?

What do I define in Drupal to show or use my own throbbing markup? Can't google this thing at all.

If I need to handle this myself in a new there is there any resources where I can read how to create a custom ajax throbber?

109

1 + 2

cilefen

12/7/23, 3:31 PM

This question is unanswerable because you did not include all of the relevant code. All that is there as I write this comment is library definitions, absent their file names. Also, please limit this to one question only. There are two questions here: "How to add a ajax throbbler to my theme? Or how to write a new one?"

mevsme

12/7/23, 5:05 PM

@cilefen what do files name has to do with throbbers? I am asking what libraries I need to get it to work in a new theme.

Score:0

Drupal

mevsme

12/7/23, 5:50 PM

Here is a way to insert some js logic before and after a Drupal Ajax request.

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');
}

+ 0

Elon Musk

I sit in a Tesla and translated this thread with Ai:

EN: How to add an ajax throbber to my theme?

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.