Title: loading notification while table is made hidden when loading? Last modified: February 6, 2021 --- # loading notification while table is made hidden when loading? * Resolved [rlohmj](https://wordpress.org/support/users/rlohmj/) * (@rlohmj) * [5 years, 3 months ago](https://wordpress.org/support/topic/loading-notification-while-table-is-made-hidden-when-loading/) * Hi, i am in need of a way to let users know the 1) table is still loading, 2) they should wait for the table features (such as footer search fields) to load before using and 3) the page is not broken since i am using it as a large searchable database. * i chanced across the support topic, [TablePress hide table while loading](https://wordpress.org/support/topic/tablepress-hide-table-while-loading/), and am pleased with the results. * however my large table takes some time to display / unhide. * i am wondering how the css class tags were used in the script to facilitate the“ display: table;” is the solution in the above link. * it could help shed light on how to reverse the initially-hide-then-display process to initially-display-then-hide, especially if the triggering mechanism can be applied on an external element outside of the table itself, such as a secondary table description field that displays while the table was made hidden. Viewing 3 replies - 1 through 3 (of 3 total) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [5 years, 3 months ago](https://wordpress.org/support/topic/loading-notification-while-table-is-made-hidden-when-loading/#post-14011866) * Hi, * thanks for your post, and sorry for the trouble. * The approach from that post basically hides the table until the JavaScript features have been applied. We know that this happened when the `dataTables_wrapper` element is available on the page (as a wrapper element around the table). The `tablepress- initially-hidden` is used as a way to be able to choose for which tables this approach should be used. One could also simply use `tablepress` instead, to apply this to all TablePress tables on the site. * It might indeed be possible to extend this approach to show the table description while the JS features are being loaded, and to then hide it. For that, you could extend the approach from the post with this CSS: * ``` .dataTables_wrapper + .tablepress-table-description-id-123 { display: none; } ``` * (Here the 123 would need to be changed to the table ID. The approach with an “ Extra CSS class” is not possible for this.) If you then put a text like “Please be patient while the table is being loaded.” into the table description, you might have a good workaround here. * Regards, Tobias * Thread Starter [rlohmj](https://wordpress.org/support/users/rlohmj/) * (@rlohmj) * [5 years, 3 months ago](https://wordpress.org/support/topic/loading-notification-while-table-is-made-hidden-when-loading/#post-14014628) * Hi! * i tried some things with the code snippet you provided and manage to get a working table preloader spinner. i’m not good with html/css/js, so pardon me if there are unnecessary lines of code. (any optimized solutions welcomed.) * Aside from hiding the table while loading, some additional settings need to be done. so sum up, this was what i did: * 1) the table description **must** be placed **below** the table. * 2) i placed this in the table description box: `
` * the `
` is a literal space to contain the preloader html. the associated css style is to make a small gap between the preloader and whatever is under the tablepress table on the page before table is loaded. `
` is my spinner placeholder styled using pure css. i modified the code from [w3schools’ loaders examples](https://www.w3schools.com/howto/howto_css_loader.asp). * 3) i placed this in the extra css classes box: `tablepress-initially-hidden` this is from [TablePress hide table while loading](https://wordpress.org/support/topic/tablepress-hide-table-while-loading/). * 4) i placed this in the classic wp editor: `
[table id=1 responsive=scroll datatables_columnfilter ="{sPlaceHolder:'head:after'}" /]
` the div is to make an almost full width space for the table (paired with custom table css to force stretch for tables that do not use the full page width). from the extension plugins, `responsive =scroll` to show nicer horizontal scrollbars for mobile page and `datatables_columnfilter ="{sPlaceHolder:'head:after'}"` for making the searchboxes shown on the header rather than the footer, so setting last row as footer is optional. * 5) i placed this in the plugin custom css box (i hope the code comments help make its easier to understand what’s what): * ``` /* Full Width Tables */ .tablepress-id-1 { min-width: 100%; margin: 0 auto 1em; } /* Indicate Clickable ONLY for Body Rows */ .tablepress-id-1 tbody tr:hover { cursor: pointer; } /* Column Widths */ .tablepress-id-1 .column-1, .tablepress-id-1 .column-2, .tablepress-id-1 .column-3 { min-width: 25%; } /* Gap-less Table Name and below Table*/ .tablepress-table-name, .dataTables_wrapper { margin-bottom: 0; } /* Disable General Search Box */ #tablepress-1_filter { display: none; } /* Table Preloader Code START */ .tablepress-initially-hidden, .dataTables_wrapper + .tablepress-table-description .tablepress-loader-space, .tablepress-scroll-wrapper + br { display: none; } .dataTables_wrapper .tablepress-initially-hidden { display: table; } /* Preloader CSS Start */ .tablepress-loader { border-radius: 50%; border-top: 25px solid deepskyblue; border-right: 25px solid lawngreen; border-bottom: 25px solid orange; border-left: 25px solid magenta; width: 120px; height: 120px; margin: auto; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Preloader CSS End */ /* Table Preloader Code END */ ``` * there is a peculiar
tag somewhere in this code because it appeared when the table description is placed under the table and i got rid of it by making css style `display:none;`. remove it if the space as a result of the
tag is wanted. * And that’s how i got a working table spinner preloader for my site. * i’m open to any improvement suggestions as i know my codes are not optimized. 🙂 * The example page for the preloader i’m using is [here](https://shippinggazette.com.sg/port-search/). - This reply was modified 5 years, 3 months ago by [rlohmj](https://wordpress.org/support/users/rlohmj/). * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [5 years, 3 months ago](https://wordpress.org/support/topic/loading-notification-while-table-is-made-hidden-when-loading/#post-14014807) * Hi, * nice, looks good to me! 🙂 * Best wishes, Tobias Viewing 3 replies - 1 through 3 (of 3 total) The topic ‘loading notification while table is made hidden when loading?’ is closed to new replies. * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944) * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/) * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq) * [Support Threads](https://wordpress.org/support/plugin/tablepress/) * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/) * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/) * 3 replies * 2 participants * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * Last activity: [5 years, 3 months ago](https://wordpress.org/support/topic/loading-notification-while-table-is-made-hidden-when-loading/#post-14014807) * Status: resolved