BigPipe is a method pioneered by Fb that’s used to lazy-load content material right into a webpage. From Drupal Development Company person’s perspective, Drupal Development Company “body” of a webpage will seem instantly, after which Drupal Development Company content material will pop in place when it’s prepared. BigPipe has been included as a Drupal 10 module in core since 8.1.x, and may be very easy— simply allow Drupal Development Company Drupal 10 module. On my newest challenge, I am utilizing it to lazy-load content material that’s generated from a really sluggish API name. Drupal Development Service performance works nice out of Drupal Development Company field, however we seen a user-experience downside the place Drupal Development Company end-user would see an enormous clean space whereas Drupal Development Company API name was ready on a response. This habits made Drupal Development Company web site appear damaged. To repair this, we determined to implement a easy loading animation. Discovering Drupal Development Company CSS selector to connect Drupal Development Company animation to wasn’t so simple as I hoped it could be. Spoiler Drupal 10 Upkeep and Help Service Let’s see Drupal Development Company code Searching for Drupal Development Company code, and never Drupal Development Company course of? Drupal Development Service CSS selector to focus on is beneath. Be aware that you simply’ll wish to qualify this inside a father or mother selector, so Drupal Development Company loader doesn’t seem in all places. .parent-selector [data-big-pipe-placeholder-id] { /* Loading animation CSS */ } BigPipe’s placeholder markup is just one <span> ingredient, which makes styling tough. Fortunately, we will make use of CSS pseudo-selectors to make a Fb-style throbber animation. Right here is a few Sass with easy-to-use variables Drupal 10 Upkeep and Help Service $pulse-duration Drupal 10 Upkeep and Help Service 0.2s; $pulse-color Drupal 10 Upkeep and Help Service rebeccaPurple; @keyframes pulse-throbber { 0% { opacity Drupal 10 Upkeep and Help Service 1; remodel Drupal 10 Upkeep and Help Service scaley(1); } 100% { opacity Drupal 10 Upkeep and Help Service 0.2; remodel Drupal 10 Upkeep and Help Service scaley(0.5); } } [data-big-pipe-placeholder-id] { place Drupal 10 Upkeep and Help Service relative; show Drupal 10 Upkeep and Help Service block; margin Drupal 10 Upkeep and Help Service 20px auto; width Drupal 10 Upkeep and Help Service 6px; top Drupal 10 Upkeep and Help Service 30px; background Drupal 10 Upkeep and Help Service $pulse-color; animation Drupal 10 Upkeep and Help Service pulse-throbber $pulse-duration infinite; animation-delay Drupal 10 Upkeep and Help Service ($pulse-duration / 3); animation-direction Drupal 10 Upkeep and Help Service alternate; & Drupal 10 Upkeep and Help Servicebefore, & Drupal 10 Upkeep and Help Serviceafter { content material Drupal 10 Upkeep and Help Service ”; place Drupal 10 Upkeep and Help Service absolute; show Drupal 10 Upkeep and Help Service block; width Drupal 10 Upkeep and Help Service 100%; top Drupal 10 Upkeep and Help Service 100%; background Drupal 10 Upkeep and Help Service $pulse-color; prime Drupal 10 Upkeep and Help Service 0; animation Drupal 10 Upkeep and Help Service pulse-throbber $pulse-duration infinite; animation-direction Drupal 10 Upkeep and Help Service alternate; } & Drupal 10 Upkeep and Help Servicebefore { left Drupal 10 Upkeep and Help Service -12px; } & Drupal 10 Upkeep and Help Serviceafter { left Drupal 10 Upkeep and Help Service 12px; animation-delay Drupal 10 Upkeep and Help Service ($pulse-duration / 1.5); } } Monitoring down Drupal Development Company placeholder’s CSS selector Discovering this selector wasn’t so simple as I initially hoped. Drupal Development Service first approach that I attempted was setting a DOM breakpoint in Chrome Developer Instruments. This performance permits you to pause Drupal Development Company execution of JavaScript when a DOM ingredient’s attributes change, Drupal Development Company ingredient will get eliminated, or any descendant DOM parts are modified. In our case, we wish to set a breakpoint when any descendant ingredient is modified after which reload Drupal Development Company web page. Hopefully, when BigPipe inserts Drupal Development Company rendered HTML, Drupal Development Company breakpoint will set off, and we will then examine Drupal Development Company placeholder HTML to seek out Drupal Development Company applicable CSS selector. undefined Sadly, this didn’t work. Why? I’m nonetheless undecided. This seems to be a bug inside Google Chrome. I created a problem inside Drupal Development Company Chromium bug tracker and can replace this text when there’s progress. PHP Breakpoints to Drupal Development Company rescue! As a result of I do know I’m utilizing Drupal Development Company BigPipe Drupal 10 module to stream Drupal Development Company content material in, Drupal Development Company subsequent step is setting a PHP breakpoint inside Drupal Development Company BigPipe Drupal 10 module inside PHPStorm. I ended up setting a breakpoint inside Drupal Development Company sendContent() operate inside BigPipeResponse.php. This had Drupal Development Company anticipated results of pausing Drupal Development Company lazy-loading of Drupal Development Company content material, which enabled me to simply examine Drupal Development Company HTML prior so I might discover Drupal Development Company placeholder’s selector. undefinedundefined Conclusion Typically a seemingly easy theming activity finally ends up being tough. It’s vital to grasp correct front-end and backend debugging strategies since you by no means know once you’re going to want them in a pinch. Hopefully, this text will save somebody from having to undergo this course of. Picture by Jonny Caspari on Unsplash Drupal 10 Improvement and Help