What is the best way to implement a loading screen in Ember 2.5? What I want to achieve is: show splash screen -> load data in background -> when DOM is ready, hide splash screen.
I tried several options, but I cannot achieve to hide the splash screen when the document is ready. I am loading a large table, so it will take some time to finish the DOM, so model-ready is not the right hook.
I did this by adding custom HTML (simple loading div) to the app/index.html:
<body>
<div class="loading-overlay" id="initialLoading"></div>
{{content-for "body"}}
<script src="assets/vendor.js"></script>
<script src="assets/event.js"></script>
{{content-for "body-footer"}}
</body>
Then I added the following to my app/application/route.js:
actions: {
loading(transition/* , originRoute*/) {
let controller = this.get('controller');
if(controller) {
controller.set('currentlyLoading', true);
}
transition.promise.finally(function() {
$("#initialLoading").remove();
if(controller) {
controller.set('currentlyLoading', false);
}
});
}
}
In my app/application/template.hbs I also had to add the loading div:
{{#if currentlyLoading}}
<div class="loading-overlay"></div>
{{/if}}
So what does happen?
index.html is loaded and no javascript is parsed yet: your loading screen is visible.
index.html is loaded and your javascript has been parsed. ember.js calls the loading action and sets currentlyLoading to true: both loading screens are shown.
the transition is complete, the first loading and second loading screen get removed
for every transition that is now happening, the loading screen is shown. To remove this behaviour, remove the second loading screen logic.
I hope it helps.
Related
Trying to build a D.R.Y. list of vocabulary terms with React Bootstrap (v.2.2.3) using Bootstrap 5.1.
I bring in my data:
import vocData from '../data/vocData'
My component:
const VocList = () => {
const [show, setShow] = useState(false)
const handleClose = () => setShow(false)
return (
<ul className="list-inline">
{Object.keys(vocData).map((item, key) => (
<React.Fragment key={key}>
<li className="list-inline-item voc-item">
<Button>
<small>{vocData[item].title}</small>
</Button>
</li>
<Modal
show={show}
onHide={handleClose}
backdrop="static"
keyboard={false}
aria-labelledby={`contained-modal-title-${vocData[item].href}`}
centered
>
<Modal.Header closeButton>
<Modal.Title id={`contained-modal-title-${vocData[item].href}`}>
{vocData[item].title}
</Modal.Title>
</Modal.Header>
<Modal.Body>{vocData[item].content}</Modal.Body>
</Modal>
</React.Fragment>
))}
</ul>
)
}
I can see my list of vocabulary terms is working but my modal is not appearing when I click the button. I've tried to research and read through:
React-Bootstrap Multiple Modal
React-bootstrap Modal component opens/closes all modals when I map through a list
How do I get my react app to display object information in my bootstrap modal when they click on a list item?
How to use React-Bootstrap modals inside a map array method to display AJAX data on button click in React?
how to show react bootstrap modal inside the function
but I'm unable to find an answer.
How can I dynamically setState and be able to render my modal for that vocabulary term in my list?
Try to use Modal only once and not render it many times. You can show only one Modal at time anyway. I have created a subcomponent for clarity.
There are many ways how to play with state. Here the initial state is null and hides the modal. When we click on button we set state with one vocData entry. This also toggles the visibility of Modal.
Finally, when we close its again, we set our state to null. In this way we use one state for two purposes - control vision and rendering of Modal and holding data for it.
I am using a loading screen with a spinner that is displayed before all contents in the window have loaded. It works well on all pages and the window loads very fast on webpages with less content but on one of my pages, I am loading many iframes that embed youtube videos. $(window).on('load', function(){}); doesn't trigger until all contents have loaded, including iframes. That means that loading takes a long time and the loading screen with the spinner is shown long after the browser has finished loading the HTML, CSS, JS, and all images. I want to use skeleton loading for the iframes after the HTML, CSS, JS, and all images have loaded to cut down on perceived load time. Is there a way to tell that the rest of the window has fully loaded but the iframes are still loading? This is what I am currently doing to remove the loading screen with the spinner:
<html>
<head>
</head>
<div class="spinner-wrapper">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
<body>
{% for video in range(videos|length) %}
<iframe class="yvideo" src="{{ "https://www.youtube.com/embed/%s" + videos[video]}.get("url") }}"></iframe>
{% endfor %}
<script type=module src="{{ url_for('static', filename='js/video.js') }}"></script>
</body>
</html>
videos.js:
$(window).on('load', function() {
preloaderFadeOutTime = 300;
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
There can be multiple ways to solve this issue:
One simple approach can be to keep source of iframes empty initially and dynamically set source of iframes upon window.load.
Here sample code:
<script>
$(window).on('load', function() {
document.getElementById('myIframe').src = "your URL";
document.getElementById('myIframe2').src = "your URL";
preloaderFadeOutTime = 300;
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
</script>
<iframe id="myIframe" src="" ></iframe>
<iframe id="myIframe2" src="" ></iframe>
EDIT:
If you cannot change the video.js file but can create your own js files which can interact with html on the page then do below in your custom js file:
//your external js
// first get collection of your iframes by class
var listOfIframes = document.getElementsByClassName("yvideo");
for (let item of listOfIframes) {
item.src = ""; // set them to empty.
}
window.addEventListener("load", function() {
//once page is loaded then populate the source with your json file.
for (let item of listOfIframes) {
item.src = "URLs from JSON";
}
});
Second approach:
Instead of calling hidePreloader() only at window.load. You can also check for the rest of the items in your page that if they are loaded or not. Once they are loaded, then you can use call hidePreloader()
I'm using bootstrap popover in my app and I need to render an outlet inside it.
I have this nested route :
this.resource('pages', function(){
this.resource('page', { path: ':id' }, function(){
this.resource('edit', function(){
this.resource('images', function(){
this.resource('image', { path: ':image_id'}, function(){
this.route('edit');
})
});
});
});
});
When the user is here => /pages/1/edit/ when he click on an image it route to /images but render the {{outlet}} inside the popover like this :
<div class="popover-content hide">
{{outlet}}
</div>
This is my popover initialisation :
$img.popover({
html: true,
content: function() {
return $('.popover-content').html(); //need to have the outlet here
}
});
So far, it render correctly my outlet, but inside the images template, I have some button that modify the DOM and it doesn't update the html. Unless if I close and open the popover again I can see the modification.
Is it possible to render the outlet directly inside the code ? or is it possible to have my popover being updated ?
Thanks for the help.
See these links for an alternative approach to putting Ember stuff in Bootstrap popovers:
Bootstrap Popovers with ember.js template
https://cowbell-labs.com/2013-10-20-using-twitter-bootstrap-js-widgets-with-ember.html
Ember and Handlebars don't like this because it's basically copying the html content of a div and plopping it into another. But that html alone isn't everything that's needed. Ember is magic and there's lots of stuff happening in the background.
Your hidden div is real ember stuff, so let's try not to mess with it by calling .html() on it. My idea is to literally move the DOM itself instead.
first, modify your popover function call to always create this placeholder div:
content: '<div id="placeholder"></div>',
next, detach the content div from the dom in the didInsertElement of the view:
// get the popover content div and remove it from the dom, to be added back later
var content = Ember.$('.popover-content').detach();
// find the element that opens your popover...
var btn = Ember.$('#btn-popup-trigger').get(0);
// ... and whenever the popover is opened by this element being clicked, find the placeholder div and insert the content element
// (this could be improved. we really just want to know when the popover is opened, not when the button is clicked.)
btn.addEventListener("click", function() {
content.appendTo("#placeholder");
});
since the content div is immediately detached when didInsertElement is called, you can remove the "hide" css class from the content div.
edit: i tried this on my own project and it broke two-way binding. the controller updated my handlebars elements, but any two-way bound {{input}} helpers did not update the controller/model. i ended up using a single-item dropdown menu, and used this to prevent the menu from closing too quickly:
Twitter Bootstrap - Avoid dropdown menu close on click inside
Edit: found the answer here: Using Ember.js, how do I run some JS after a view is rendered?
In the mapView
didInsertElement: function() {
this._super();
map_initialize();
},
*********** original post ****************
I'm pretty new to js and am trying ember.js.
I am trying to use the google maps api to show a map. Normally you should initialize the map with
<body onload="map_initialize()">
but as the map div that will receive the map is part of an ember view template it is not yet in the DOM when the function is called.
console.log(document.getElementById("map_canvas"));
returns false.
I then placed the initialization function in my map view so that could call it from an event tied to the map div itself. This way it is impossible to call map_initialize() before the div is loaded.
<script type="text/x-handlebars" data-template-name="map" >
<div id="map_canvas" style="width:100%; height:100%" {{action "map_initialize" on="click"}}></div>
</script>
this works perfectly. When the page loads, I can click on the map div and then the map is loaded.
My question is, how can I get this event to be called automatically after the div is added to the DOM
<div id="map_canvas" style="width:100%; height:100%" onload="initialize()"></div>
has no effect (the map_initialize() function is not called).
I have also tried to do this via ember with
<div id="map_canvas" style="width:100%; height:100%" {{action "map_initialize" on="load"}}></div>
but this also does nothing.
What is the correct event name?
Thanks
Override didInsertElement() on the view (and probably call this._super() inside, calling the function you just shadowed).
You can also listen to changes to the DOM, such as DOMNodeInserted or DOMSubtreeModified, but that would include any change
I'm having difficulty rendering my EXTJS grid that rides on top of a django app. The grid is only displayed some of the time. When the grid is supposed to be displayed it works. When the grid is not supposed to be displayed I get a "ct is not defined" error from extjs-core. I researched this error and it seems it occurs when my <div id="my-grid"> is not defined. The div is defined inside a grid.html that is only loaded some of the time.
These are my files.
view_main.js - I define all of my objects here inside Ext.onReady.
Ext.onReady(function(){
var grid = new Ext.grid.GridPanel({
border: false,
//...
}
grid.render('my-grid') // comment this out and "ct is not defined" goes away
// but the grid never renders in grid.html
base.html - my base django file that my templates extend. This file also loads my view_main.js file.
<!-- Load Script -->
<script type="text/javascript" src="/site_media/js/view_main.js" ></script>
grid.html - the grid html file that gets rendered inside an EXTJS TabPanel.
<div id="my-grid" style="border: height: 800px; width: 800px;"></div>
I don't want to even attempt to render my grid unless grid.html is being displayed. But the grid doesn't work unless I put grid.render inside of view_main.js
If I try to put the render script inside grid.html the I get "grid is not defined error"
<script type="text/javascript" >
Ext.onReady(function(){
grid.render('my-grid');
}
</script>
How can I only render the grid when grid.html is loaded?
If you're just trying to avoid that error, try checking for the existence of 'my-grid',
Ext.onReady(function() {
if( (Ext.get('my-grid')) !== null)
{
grid.render('my-grid');
}
});