When the BigPipe module is installed, the animation does not work On this page :

https://dev.s1biose.com/profil

There is a menu at the top right. It flashes green when the .views-exposed-form class is found with this JS code:

  if ($("#navbar-collapse-second .views-exposed-form").length) {
       $("#block-togglenavigationsecond .icon-navbar-second-alert").removeClass("icon-navbar-second-alert-disable");
  };


When the BigPipe module is installed, the animation does not work (under dev domain).

Here is my site with BigPipe uninstalled (under www domain):

https://www.s1biose.com/profil

The problem is that I do not see any difference in the HTML code.

Why does not the animation work with BigPipe ?

It must work on all browsers. But BigPipe creates problems on some web browser.

Thank you



Here is the complete JS file for my animation:

(function ($) {
  'use strict';

  $('#navbar-collapse-first').on('show.bs.collapse', function () {
       $('#navbar-collapse-second').collapse('hide');
  });

  $('#navbar-collapse-second').on('show.bs.collapse', function () {
       $('#navbar-collapse-first').collapse('hide');
  });

  $('#navbar-collapse-first').on('show.bs.collapse', function () {
       $('body').addClass('overlay-is-navbar-collapse');
  });

  $('#navbar-collapse-first').on('hide.bs.collapse', function () {
       $('body').removeClass('overlay-is-navbar-collapse');
  });

  $('#navbar-collapse-second').on('show.bs.collapse', function () {
       $('body').addClass('overlay-is-navbar-collapse');
  });

  $('#navbar-collapse-second').on('hide.bs.collapse', function () {
       $('body').removeClass('overlay-is-navbar-collapse');
  });

  $('#navbar-collapse-first .form-submit').on('click', function () {
       $('#navbar-collapse-first').collapse('hide');
  });

  $('#navbar-collapse-second .form-submit').on('click', function () {
       $('#navbar-collapse-second').collapse('hide');
  });

  $('#navbar-collapse-first .navbar-nav .dropdown').on('shown.bs.dropdown', function () {
       $(this).find('.dropdown-toggle svg').removeClass("fa-plus-circle").addClass("fa-minus-circle");
  });

  $('#navbar-collapse-first .navbar-nav .dropdown').on('hidden.bs.dropdown', function () {
       $(this).find('.dropdown-toggle svg').removeClass("fa-minus-circle").addClass("fa-plus-circle");
  });

  $('.collapse').on('shown.bs.collapse', function () {
       $(this).parent().find('.panel-heading .collapse-change-icon svg').removeClass("fa-plus-circle").addClass("fa-minus-circle");
  });

  $('.collapse').on('hidden.bs.collapse', function () {
       $(this).parent().find('.panel-heading .collapse-change-icon svg').removeClass("fa-minus-circle").addClass("fa-plus-circle");
  });

  $('.bs-tour-action-trigger').on('click', function () {
       $('#comment-ca-marche').modal('hide');
  });

  $('#block-boutonimportant').on('click', function () {
       $('#navbar-collapse-first').collapse('hide');
  });

  $('#block-boutoncharte').on('click', function () {
       $('#navbar-collapse-first').collapse('hide');
  });

  if ($("#navbar-collapse-first .views-manage-menu").length) {
       $("#block-togglenavigationfirst .icon-navbar-first-alert").removeClass("icon-navbar-first-alert-disable");
  };

  if ($("#navbar-collapse-second .views-exposed-form").length) {
       $("#block-togglenavigationsecond .icon-navbar-second-alert").removeClass("icon-navbar-second-alert-disable");
  };

  $('#navbar-collapse-first').on('shown.bs.collapse', function () { 
       $(this).find("#block-menuprincipal .dropdown-toggle").dropdown("toggle");
  });

  $('#navbar-collapse-first').on('shown.bs.collapse', function () { 
       $(this).find(".views-manage-menu .dropdown-toggle").dropdown("toggle");
  });

}(jQuery));
Bigpipe's purpose is to load dynamic/uncachable blocks of content (e.g. forms) in via javascript. This is so that the rest of the site can remain cached and just the dynamic parts get loaded in separate.

So the issue here is probably your own javascript is triggering before big pipe has loaded the targeted content in. Have you got your JS in window.load or something like that? You should place it into a Drupal behaviour which will get called each time something dynamic is loaded in by drupal.