Progressive Loading of Content in Overlays

This proof of concepts shows different loading spinner for each container in an overlay. In this demo, it has three equal containers with different timeouts for the spinners.

CLICK ME!!!!

Copied successfully!

Note: Put the Standard View element on the container where it will be used.


                            @section OverlayContainerDemo {
                            <div class="pcui">
                            	<div class="new-overlay-container width-right-40" overlay="two" id="new-overlay-right">
                            		<div id="toggle-sample2-dimmed-overlay" class="dimmed-background">
                            	</div>
                            <div class="overlay-content" id="overlay-container-dom">
                            	<section class="headers-section">
                            		<div class="headers-section-left-panel">
                            		<div class="headers-section-badge">
                            		<label class="badge-danger">Badge</label>
                            	</div>
                            </div>
                            <div class="headers-section-center-panel truncate-string">
                            	<div class="headers-section-default-text">
                            	 	<h1 class="truncate-string">123456789
                            	<label class="headers-additional-text">Some text here</label></h1>
                            	</div>
                            </div>
                            <div class="headers-section-right-panel width-auto">
                            	<div class="headers-section-icon icon-buttons">
                            	 	<a href="javascript:void(0);">
                            		<i class="ion-android-close"></i>
                            	</a>
                            	</div>
                            </div>
                            </section>
                            <div class="overlay-body-content">
                            	 	 	<div class="left-side-container">
                            	 	<div class="left-side-content">
                            	<h1>LEFT SIDE</h1>
                            	 	 	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            	 	 	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            	 	 	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            	 	 	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            	 	 	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            	 	 	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                            	 	<br />
                            	 	<br />
                            	 	<button class="ui blue fluid button"
                            	 	 	onclick="alert('Yay! It\'s clickable!')">
                            	 	 	Test button if clickable
                            	</button>
                            	 	 	<div class="standard-view-container progressive-loading">
                            	 	<pcui_standard_view_loading id="standard-view-loading"
                            	 	ref="loading-spinner-one"></pcui_standard_view_loading>
                            	</div>
                            	</div>
                            </div>
                            <div class="middle-container">
                            <h1>MIDDLE</h1>
                            	 	 	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            	 	 	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            	 	 	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            	 	 	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            	 	 	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            	 	 	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                            	 	<center>
                            	 	 	<img style="width: 50%;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu2gszn8rjq-xLNIps0X24fMM186kforEe1Orw_G1bqXBc2P91" />
                            	 	</center>
                            <center><h1>This panel is loaded slower than the left side because it has an image.</h1></center>
                            <div class="standard-view-container progressive-loading">
                            	 	<pcui_standard_view_loading id="standard-view-loading"
                            		 	ref="loading-spinner-two"></pcui_standard_view_loading>
                            	</div>
                            </div>
                            <div class="right-side-container">
                            <h1>RIGHT SIDE</h1>
                            	 	 	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            	 	 	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            	 	 	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            	 	 	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            	 	 	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            	 	 	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                            	 	<center>
                            	 		<img style="width: 100%;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu2gszn8rjq-xLNIps0X24fMM186kforEe1Orw_G1bqXBc2P91" />
                            	 	</center>
                            <center><h1>This panel is loaded last because it has a long text and a bigger image.</h1></center>
                            	 	 	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            	 	 	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            	 	 	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            	 	 	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            	 	 	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            	 	 	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                            	 	<div class="standard-view-container progressive-loading">
                            	 		<pcui_standard_view_loading id="standard-view-loading"
                            	 	ref="loading-spinner-three"></pcui_standard_view_loading>
                            	 	 	</div>
                            	 	 </div>
                            	 	</div>
                            	 	</div>
                            	</div>
                            </div>
                            }

Copied successfully!


                            var overlayContainerDOM = new Vue({
                                el: '#overlay-container-dom',
                                name: 'Progressive Loading Demo',
                                data: {
                                    isLoadingSpinnerShown: false
                                },
                                components: {
                                    pcui_standard_view_loading: PCUIStandardViewLoadingComponent
                                },
                                mounted: function () {
                                    $('.menu .item').tab();
                                },
                                methods: {
                                    toggleDisplay: function (options) {
                                    this.isLoadingSpinnerShown = true;
                                    if (options.action === 'show') {
                                        this.$refs[options.ref].show({
                                            isAnimated: options.isAnimated
                                    });
                                    } else if (options.action === 'hide') {
                                        this.isLoadingSpinnerShown = false;
                                        this.$refs[options.ref].hide({
                                            isAnimated: options.isAnimated
                                    });
                                    }
                                    },
                                    loadAllPanels: function () {
                                        var self = this;
                                        self.loadFirstPanel();
                                        self.loadSecondPanel();
                                        self.loadThirdPanel();
                                    },
                                    loadFirstPanel: function () {
                                        var self = this;
                                        self.$refs['loading-spinner-one'].show({
                                                isAnimated: true
                                        });
                                        setTimeout(function () {
                                        self.$refs['loading-spinner-one'].hide({
                                                isAnimated: true
                                        });
                                    }, 3000)
                                    },
                                    loadSecondPanel: function () {
                                        var self = this;
                                        self.$refs['loading-spinner-two'].show({
                                            isAnimated: true
                                        });
                                        setTimeout(function () {
                                        self.$refs['loading-spinner-two'].hide({
                                            isAnimated: true
                                            });
                                        }, 6000)
                                    },
                                    loadThirdPanel: function () {
                                        var self = this;
                                        self.$refs['loading-spinner-three'].show({
                                                isAnimated: true
                                        });
                                        setTimeout(function () {
                                            self.$refs['loading-spinner-three'].hide({
                                                isAnimated: true
                                        });
                                        }, 9000)
                                    }
                                }
                            });

Copied successfully!

Note: This is the styling for the demo overlay.


                            .overlay-body-content {
                                display: flex;
                                height: 100%;
                            }
                            .left-side-container,
                            .middle-container,
                            .right-side-container {
                                position: relative;
                                border: 1px solid black;
                                width: 100%;
                                display: flex;
                                flex-direction: column;
                                padding: 20px;
                            }

                            // Note: Add this as a custom styling to the Standard View
                            .standard-view-container.progressive-loading {
                                position: absolute;
                                width: 100%;
                                height: 100%;
                                top: 0;
                                left: 0;
                            }

Progressive Loading of Content in Overlays

CLICK ME!!!!

123456789Some text here

LEFT SIDE

MIDDLE

This panel is loaded slower than the left side because it has an image.

RIGHT SIDE

This panel is loaded last because it has a long text and a bigger image.