- Help Center Home
- Getting started
- Introducing FacetWP
- Installation and updates
- FAQ
- How it works
- What are facets?
- Facet types
- Built-in facet types
- Checkboxes
- Dropdown
- Radio
- fSelect
- Hierarchy
- Slider
- Search
- Autocomplete
- Date Range
- Number Range
- Star Rating
- Proximity
- Pager + load more
- Sort
- Reset
- User Selections
- Add-on facet types
- Map
- Hierarchy Select
- Range List
- Time Since
- A-Z Listing
- Color
- Custom facet types
- Custom facet types
- Indexing
- Listing templates
- Extras & integrations
- Add-on features and extras
- Using FacetWP with …
- Built-in integrations
- Advanced Custom Fields
- WooCommerce
- SearchWP
- WP-CLI
- Add-on integrations
- Bricks
- Elementor
- Beaver Builder
- WP Recipe Maker and Tasty Recipes
- Relevanssi
- WPML and Polylang
- Meta Box
- Flatsome (theme)
- External integrations
- Listify (theme)
- Listable (theme)
- WPGraphQL
- Document Library Pro
- Tips & tricks
- WooCommerce plugins
- WordPress multi-site
- WP All Import
- WebToffee Import Export
- WP Job Manager
- Easy Digital Downloads
- EDD Reviews
- Intuitive Custom Post Order
- Custom Taxonomy Order
- Post Types Order
- Genesis framework
- WP External Links
- ElasticPress
- All in One SEO (Pro)
- The Events Calendar Pro
- Yoast SEO
- Caching & hosting
- WP Rocket
- Cloudflare
- New Relic
- WP Engine
- Fast Velocity Minify
- Incompatibilities
- Incompatible plugins
- Troubleshooting
- Troubleshooting guide
- Using the right query
- Common issues
- Get support
- Developers
- Hooks reference
- JavaScript reference
- Shortcodes reference
- FacetWP REST API
- How FacetWP works
- The FacetWP URL
- FacetWP speed and limits
- Tutorials
- Code snippets
- Changelog
Add Loading Notifications to FacetWP Templates
To let users know when the template is refreshing, we can use the facetwp-refresh
and facetwp-loaded
events to inject HTML into the template.
Add the following code to your (child) theme’s functions.php to add a <div>
with the text “Loading…” above the template. You can customize the HTML to display an image, loading gif, or whatever else you need:
How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
add_action( 'wp_head', function() { ?> <script> (function($) { $(document).on('facetwp-refresh', function() { $('.facetwp-template').prepend('<div class="is-loading">Loading...</div>'); }); $(document).on('facetwp-loaded', function() { $('.facetwp-template .is-loading').remove(); }); })(jQuery); </script> <?php }, 100 );