--- title: "Quick Tip: Add a Loading Animation for BigPipe Content" url: "/articles/quick-tip-add-a-loading-animation-for-bigpipe-content" type: article date: 2018-08-01 updated: 2018-08-01 --- # Quick Tip: Add a Loading Animation for BigPipe Content # Quick Tip: Add a Loading Animation for BigPipe Content A quick use-case for debugging both the front-end and back-end of Drupal By [ Mike Herchel ](/about/mike-herchel) August 1, 2018 BigPipe is a technique [pioneered by Facebook](https://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919/) that’s used to lazy-load content into a webpage. From the user’s perspective, the “frame” of a webpage will appear immediately, and then the content will pop in place when it’s ready. BigPipe has been included as a module in Drupal core since 8.1.x, and is very simple— just enable the module. On my latest project, I'm using it to lazy-load content that’s generated from a very slow API call. The functionality works great out of the box, but we noticed a user-experience problem where the end-user would see a big blank area while the API call was waiting on a response. This behavior made the website seem broken. To fix this, we decided to implement a simple loading animation. Finding the CSS selector to attach the animation to wasn’t as simple as I hoped it would be. ## Spoiler: Let’s see the code Looking for the code, and not the process? The CSS selector to target is below. Note that you’ll want to qualify this within a parent selector, so the loader doesn’t appear everywhere. ```css .parent-selector [data-big-pipe-placeholder-id] { /* Loading animation CSS */ } ``` BigPipe’s placeholder markup is only one `` element, which makes styling tricky. Luckily, we can make use of [CSS pseudo-selectors](https://www.lullabot.com/articles/css-pseudoelements-and-transforms-my-favorite-css-tools) to make a Facebook-style throbber animation. Here is some Sass with easy-to-use variables: ```scss $pulse-duration: 0.2s; $pulse-color: rebeccaPurple; @keyframes pulse-throbber { 0% { opacity: 1; transform: scaley(1); } 100% { opacity: 0.2; transform: scaley(0.5); } } [data-big-pipe-placeholder-id] { position: relative; display: block; margin: 20px auto; width: 6px; height: 30px; background: $pulse-color; animation: pulse-throbber $pulse-duration infinite; animation-delay: ($pulse-duration / 3); animation-direction: alternate; &:before, &:after { content: ''; position: absolute; display: block; width: 100%; height: 100%; background: $pulse-color; top: 0; animation: pulse-throbber $pulse-duration infinite; animation-direction: alternate; } &:before { left: -12px; } &:after { left: 12px; animation-delay: ($pulse-duration / 1.5); } } ``` ## Tracking down the placeholder’s CSS selector Finding this selector wasn’t as simple as I initially hoped. The first technique that I tried was setting a DOM breakpoint in Chrome Developer Tools. This functionality allows you to pause the execution of JavaScript when a DOM element’s attributes change, the element gets removed, or any descendant DOM elements are modified. In our case, we want to set a breakpoint when any descendant element is modified and then reload the page. Hopefully, when BigPipe inserts the rendered HTML, the breakpoint will trigger, and we can then inspect the placeholder HTML to find the appropriate CSS selector. ![Setting DOM breakpoints within Chrome Developer Tools](/sites/default/files/styles/wide_xs/public/assets/2018-08/break-on-subtree-modifications.png.webp?itok=GK7qMdXW "break-on-subtree-modifications.png") Setting DOM breakpoints within Chrome Developer Tools Unfortunately, this didn’t work. Why? I’m still not sure. This appears to be a bug within Google Chrome. I [created an issue within the Chromium bug tracker](https://bugs.chromium.org/p/chromium/issues/detail?id=869986) and will update this article when there’s progress. ## PHP Breakpoints to the rescue! Because I know I’m using the BigPipe module to stream the content in, the next step is setting a PHP breakpoint within the BigPipe module within PHPStorm. I ended up setting a breakpoint within the `sendContent()` function within *BigPipeResponse.php*. This had the expected result of pausing the lazy-loading of the content, which enabled me to easily inspect the HTML (by halting the injection of the BigPipe content) so I could find the placeholder’s selector. ![PHP breakpoint within the BigPipe module](/sites/default/files/styles/wide_xs/public/assets/2018-08/break-in-bigpipe-module.png.webp?itok=13FG2O1s "break-in-bigpipe-module.png") PHP breakpoint within the BigPipe module ![Yay! We can finally see the placeholder HTML](/sites/default/files/styles/wide_xs/public/assets/2018-08/big-pipe-selector.png.webp?itok=Tf9y6lm3 "big-pipe-selector.png") Yay! We can finally see the placeholder HTML ## Conclusion Sometimes a seemingly simple theming task ends up being tricky. It’s important to understand proper front-end and backend debugging techniques because you never know when you’re going to need them in a pinch. Hopefully, this article will save someone from having to go through this process. Photo by Jonny Caspari on Unsplash Published in: - [ Drupal Development ](/topics/drupal-development) - [ Front-end Development ](/topics/frontend-development) - [ JavaScript ](/topics/javascript) You must have JavaScript enabled to use this form. ## Get in touch with us ### Tell us about your project. We'd love to hear from you! First Name Last Name Your email address Your organization How you heard about us Tell us more Leave this field blank