I am using the PIXI.Loader to load images for sprites.
Therefore I am tracking the loading progress to show and hide a corresponding loader component.
When the progress is at 100 the loader component is set to invisible.
So far this was working totally fine, but suddenly the loader stops at 99.99999999999984%.
The images seem to be loaded all correctly, but the loader components obviously won't hide.
I am using React, the part where the progress is looks like the following:
if (loader && !firstRender.current) {
firstRender.current = true
loader.onProgress.add(l => {
setProgress(l.progress)
})
}
useEffect(() => {
if (progress === 100) setVisibility("none")
}, [progress])
return (
<div className="bg" style={{display: visibility}}>
<CircularProgressWithLabel color="primary" value={progress} />
</div>
)
Does anybody have an idea why the progress doesn't reach 100%?
Kind regards
Philipp
add
loader.onComplete.add(() => {
this.loadingComplete();
});
and then do your processing by defining
loadingComplete(){//your stuff}
method whith whatever you want to do after loading is complete. worked for me perfectly
Related
I got a basic WebView in Xamarin.Forms like this:
<WebView AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All" x:Name="ChartWebView" Style="{StaticResource BackgroundStyle}">
<WebView.Source>
<HtmlWebViewSource Html="{Binding ChartHTML}" />
</WebView.Source>
</WebView>
I use the WebView to display a Chart.js diagram which works perfectly fine. On my page i got a button where the user can request data.
private async Task RequestData()
{
//Doing some stuff to get data ...
BuildChartHTML();
}
private void BuildChartHTML()
{
var html = GetChartJSConfigString();
Device.BeginInvokeOnMainThread(() =>
{
ChartWebView.Source = new HtmlWebViewSource
{
Html = html
};
});
}
However, on iOS only, everytime on exactly the 10th request/reload the WebView gets blank. It also stays blank after that. I need to re-navigate to this page to get it up and running again. I tried adjusting the height on WebView.Navigated as described in this thread, without success.
The problem doesn't accure on Android with the same code base.
Open to any workarounds if this is a framework bug.
PS: I obviously made sure that the html I'm loading is not broken. I loaded the same data 10 times and i compared the html loaded on the 10th time where the WebView broke. It was exactly the same HTML string.
Turned out to be a problem with iOS WKWebView and the use of HTML canvas (chart.js is renderered on a canvas).
After debugging into my WebView (stupid me not thinking about that possiblity before), i found out that the canvas memory exceeded the limit. With the help of a solution posted here i managed to avoid this problem.
Keep in mind this solution is a little bit hacky. Basically what I've done is, as pointed out in the link above, i "deleted" the canvas everytime i reload my chart. By "deleting" i mean setting the canvas to width and height to zero. Applied to my code the solution looks like this:
Inside my javascript that runs in the browser i added a function like this:
function deleteCanvas() {
//Get the main canvas where the chart is rendered to
var chart = document.getElementById('chart');
chart.height = 0;
chart.width = 0;
}
And then everytime i call my BuildChartHTML() function i call this method in my c# code like this:
Device.BeginInvokeOnMainThread(() =>
{
ChartWebView.Source = new HtmlWebViewSource
{
Html = html
};
ChartWebView.Eval("deleteCanvas()");
});
I am new to UI coding and started using react-admin for putting some simple pages. Everything went well and we are able to host pages correctly. But we have noticed random issues where the background image is filling up the entire screen or sometimes the whole page gets reduced to the hamburger menu. I have disabled the registerServiceWorker to stop having my pages in cache. Not sure if this is causing the weird UI behavior.
I don't know why you get those issues, the description is way too generic and it seems you don't have any idea what the problem can be, probably due to being new to the area. Either way the kind of problem you appear to have is probably related to CSS which is a way give style to your page. But React Admin doesn't use CSS directly, you can use it that way, but for more dynamic way to style the page the Material-ui library uses a thing called JSS to apply the styles.
There are many libraries that are being used together in order to produce React Admin, you should have an understanding of the most important ones in order to do something fancy. My advice to you since you are new, and you pretend to use React Admin, first use what React Admin offers and when you feel comfortable using that components and have a general grasp how the framework works, after that start implementing your own components that don't have a direct relation to React Admin but use some of the same libraries of React Admin.
Also check if you are creating a React Admin app using the <Admin> component or are embedding React Admin in another app since the second is more probable to produce bugs.
After some debugging, I think i figured out the cause of this issue. I had a custom button to duplicate a row (basically post a create and route to edit page on the new id). For some reason, the rendering of that button seems to have caused this issue inconsistently. The actual button works fine but causes this inconsistent behavior. Below is the code for that button. Is there any issue with the below?:
export default class DuplicateButton extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = ({ redirect: false });
var redirectPath = '';
}
handleClick = (props) => {
var
{
push, record, resourceName
} = this.props;
let tempRecord = record;
var result = '';
console.log(this.props);
var p = restDataProvider(CREATE, this.props.resource + "/" + tempRecord.id, { data: tempRecord }).then(resp => {
result = resp.data;
let routePath = '/' + this.props.resource + '/' + result.id;
console.log(routePath);
this.redirectPath = routePath;
this.setState({ redirect: true });
return result;
});
}
render() {
if (this.state.redirect) {
console.log('Redirect to Edit page');
return <Redirect push to={this.redirectPath} />;
}
return <Button variant="flat" color="primary" label="Duplicate Entry" onClick={this.handleClick}><DuplicateIcon /></Button>;
}
}
i have encountered an issue, when making a text editor with support of image based tags. There is a need to move those tags around freely in the text, which is being made impractical by this issue.
Basically when I start dragging an image, and then drop it on desired location, one of two results can happen: A) it works as intended and B) the image is dropped to the end/beginning of the sentence. You can see the behaviour in attached gif. Resulting behavior
I'm using react and typescript combination for creating the page with quill being inserted in a component.
// TextEditor/index.tsx
import * as React from 'react';
import * as Quill from 'quill';
import { TextEditorState, TextEditorProps } from '../#types';
import { generateDelta } from '../#utils/generateDelta';
const formats = [
'image'
];
class TextEditor extends React.Component<TextEditorProps, TextEditorState> {
constructor(props: TextEditorProps) {
super(props);
this.state = {
Editor: undefined
}
}
componentDidMount() {
const self = this;
this.setState({Editor: new Quill('#editor-container', {formats: formats, debug: 'warn'})});
}
changeText(text: string) {
if(typeof(this.state.Editor) !== 'undefined') {
this.state.Editor.setContents(generateDelta(text), 'api');
}
}
render() {
return (
<div id="editor-container"></div>
);
}
}
export default TextEditor;
And the usage of this component in another component is just
// editor.tsx
import TextEditor from '../QuillEditor/TextEditor';
...
onUpdate(text: string) {
this.refs.targetEditor.changeText(text);
}
...
render() {
return (
...
<TextEditor
ref={'targetEditor'}
/>
...
)
}
I have tried to change the text editor to just contentEditable div and that worked flawlessly, so it shouldn't be because of some css glitch.
Has anyone some idea of what could be causing this?
EDIT Feb 6:
I have found out, that this issue is manifesting only in Chrome, as IE and MS Edge did not encountered this issue. I have tried to switch off all extensions, yet the issue is still there. Private mode also didn't help.
After few days of research I have figured out what is causing the issue.
The combination of Quill and React won't work, because of the way React 'steals' input events, while creating the shadow DOM. Basically, because it tries to process my input in contenteditable div created by Quill, it causes some actions to not fire, resulting in the weird behaviour. And because Quill tries to do it by itself, outside of React DOM.
This I have proved in my simple testing project, where adding a simple input tag anywhere on the page broke down the Quill editor.
Possible solution would be to use react-quill or some other component container, however I haven't managed to make it successfully work, or write some yourself, which would incorporate Quill to React in its DOM compatible way.
I'm trying to find a way to perform animation depending of the ReactElement's lifecycle, it's pretty easy to do an animation when the component has just been mounted, but I would do another one before the component unmount.
I can't really use the ReactCSSTransitionGroup because that won't use RequestAnimationFrame.
Just to describe a bit my case, my component is a sidebar, that I can toggle on/off depending on some user's inputs.
var Sidebar = React.createClass({
componentDidMount: function() {
var menuUfeWidth = $('.menu-ufe').width();
$(this.getDOMNode()).transition({x: menuUfeWidth}, Utils.animationDuration * 2, 'snap');
},
render: function() {
return (
<div className={'leaflet-sidebar left'}>
<div className={'ufe-content'} />
</div>
);
}
});
I am wondering how would you work your way off to be able to have an animation before the component unmount.
ReactCSSTransitionGroup is just a specialized version of ReactTransitionGroup that calls componentWillEnter, componentDidEnter, componentWillLeave, and componentDidLeave based on your defined CSS.
If you don't want to use CSS animations, you can simply use ReactTransitionGroup and use a component that implements these lifecycle hooks using RAF-based animations:
<ReactTransitionGroup component="div">
<MyCustomReactTransitionComponent key={...} />
</ReactTransitionGroup>
Here's an example I found from another SO post: http://jsbin.com/jebumipimo/1/edit?html,console,output
I am new in using jquery. I am trying add in the simplemodal.js (Eirc Martin's simple modal) a function called 'jBox' that will take the data (ie link) and options and using ajax will load the content into the modal container. This way I want on my pages in several places easy call this function
jBox = function(address, options){
$.get(address, function(data) {
$.modal(data);
});
};
});
The code is working fine, but i would like to add a loading image before the content is fully loaded. There is a lots of similar posts about loader/ spinner in simplebox but none of the works for me.
I was trying following code
$('#test').load('<img src="loader.gif">').html(data);
$('#test').modal();
But, some way, it doesnt work for me. Any ideas what I am doing wrong? Thanks
I use the ajaxStart and ajaxStop events.
$("body").on({
ajaxStart: function() {
$(this).addClass("loading"); // so page knows it's in loading state
// .. your modal code
},
ajaxStop: function() {
$(this).removeClass("loading"); // not it loading state anymore
// .. What you should do if loading is done. (eg. hide modal)
}
});
In this case I set the body class to 'loading'. So you can do some magic in css if you like.
I tend to use it to disable forms as well.
body.loading div.some-class {
// your special style for during loading
}