I am developing a webapp using quasar and there I used AmCharts with Axios for the API.
When data is received from the API, 5~6 charts are then rendered on the page.
The problem is there is a significant delay until the charts to be displayed after the component mounted.
I'd like to show a loading spinner during this time.
How should I detect all components are finished rendering?
Or is there some other way around for me to overcome this problem?
nextTick() is called when the DOM is fully updated (that means, components are rendered again).
You could try this in your charts component, a watcher that checks when the API is fetched, provided you already have a loader component that shows only if a show variable is set to true:
watch:{
values(newVal){
this.nextTick().then(()=>{
this.show= true;
});
}
}
Related
I have a custom module that contains a button. The button click performs a process that sometimes takes 5-10 seconds to complete. Is there a way in Kentico to display a custom busy message like the "Loading" message that Kentico displays during lengthy processes? I would like to show the same "Loading" msg that Kentico shows with my own custom message.
If your module is built using the out of the box page templates and webparts, this is included by default. If it is not and you're using custom aspx template pages, you'll need to ensure that the page in inherited properly and add that in. You might want to reference another out of the box module which is using code already like the Users in the Membership module.
Yes, but it depends on how things are set up.
If the button executes an Ajax Panel (it does a postback through an ajax call), then you can capture the ajax call and put your loading message there.
<script type="text/javascript>
var AjaxHandler = Sys.WebForms.PageRequestManager.getInstance();
AjaxHandler.add_beginRequest(beginRequestHandler);
AjaxHandler.add_endRequest(endRequestHandler);
function beginRequestHandler(sender, args) {
// Waiting
}
function endRequestHandler(sender, args) {
// close waiting
}
</script>
If you have it postbacking on the page, you can try to put a hook when the button is clicked to show the waiting, when the page refreshes then the waiting will of course be gone.
$("#mybutton").click(function() {
// Waiting
});
I know we should use unit tests for our reactjs components. But what I also want, is some way to manually test our components in isolation. Because we are working on small sprints in which we must deliver some finished component before having the page that first uses that component. And I want to see that full component really working (i.e. test integration with css and sub-components).
So to start with, I would like to see that new component rendered in black page that doesn't require that component directly, but to take that component name/path from a query-string parameter. And then I plan to add to that page some generic component configuration (e.g. a textbox with json representing the props to pass to that component).
The first problem I'm facing now is about how to configure webpack, webpack-dev-middleware, or webpack-dev-server to be able to load a component passed by parameter.
Anyone know how to that? Or a better way to handle this?
I would try something like this:
Set up an entry point that uses require.context.
Invoke require within that context based on your querystring. You should have you React component now. Render that through React.
In order to generate the test controls I would include the meta within the component using JSON Schema. The form controls could be then generated using some form generator such as plexus-form or tcomb-form.
I have some custom controls that I want to include in Xpages, but I don't want them to be visible to the user or to take up space on the screen, as it is throwing my alignment off. I have looked at the properties rendered, loaded, and visible, but I don't really understand them and they don't seem to do what I want, which is to include some functionality but not change the layout.
I am sure there is a way to do this, but I can't figure it out.
Loaded means it won't be added to the component tree and only affects server-side functionality. Because it's not in the component tree (the server-side map of the page) it can't be passed to the browser or processed during partial refreshes. Rendered and visible are the same and mean they're in the component tree, so server-side processing can interact with them, but no HTML is passed to the browser for them. So you can't interact with them via CSJS. If you want it passed to the browser, available for CSJS but not visible to the user, you'll need to set the style as display:none. Another option is to put that style in a theme and allocate the themeId you choose to your custom control.
Which is the recommended way of waiting for a page to load/reflow in Awesomium.NET 1.7+ when running in a non-UI environment? I've tried this approach:
using (var view = WebCore.CreateWebView(...))
{
// Load page, resize view etc.
// ...
do
{
System.Threading.Thread.Sleep(50);
WebCore.Update();
} while (view.IsLoading);
// Do something with the page
// ...
}
However, this doesn't seem to work reliably - if I render the page to a bitmap after the loop it pretty often comes out blank (but not always). Is there a better way of waiting for page load/reflow?
Try subscribing to the WebView.DocumentReady event.
How you do it depends on what you are waiting for. The code in the question should work when waiting for a page to load, but resizing the view is different - check out the BitmapSurface.Resized event, it fires when the BitmapSurface has been resized and updated its buffer.
One major difference that I have noticed between ExtJS 3.x and 4.x is how the rendering/layout calculation is handled for components that are rendered inside of a containing element that has display:none (NOT an Ext created/monitored containing element). In 3.x, upon showing the containing element, the Ext component it contained would be properly rendered and sized to whatever dimensions i set for it.
However, in 4.x, that same component will not be displayed at all and have a zero height and width when its containing element was shown. After it was visible if I do a call to .setSize() it would then properly be displayed. Problem is, in my application there is just no way to be able to go through all the events that could cause a hidden component to be shown, and add code to make sure its layout is manually forced to be recalculated.
So my question is, is there any way to get back 3.x's behavior in this situation for all components across the board in 4.x?
What you can try to do is set up listeners on your components that delegate to the underlying DOM elements, perhaps that will solve your issue.
However my suggestion is if at all possible is to use the framework to manage the entire page layout using Viewport. You can still suck in the HTML (if you must) and render it inside containers or panels for example. Perfect use case here is Header and Footer which are generated by server side code (jsp, gsp, asp..) and then displayed in the North or South regions of the Viewport using contentEl : 'myDivId' configuration.