Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Delayed editor creation on load #27

Open
fredck opened this issue Mar 14, 2017 · 5 comments
Open

Delayed editor creation on load #27

fredck opened this issue Mar 14, 2017 · 5 comments

Comments

@fredck
Copy link
Contributor

fredck commented Mar 14, 2017

Currently, it is pretty noticeable the delay on creating the editor in the website. You can even clearly see the ugly editor contents before it is replaced:

flickering
@Reinmar
Copy link
Collaborator

Reinmar commented Mar 14, 2017

I've talked with @oleq about this recently. I think that that FOUC cannot be easily avoided by pulling the styles out of the JS file and moving them to the <head> because these styles base on classes which are added later. So either we add separate styles (independent from the editor, targeted at styling the content when the editor is not available) to that website's stylesheet or we just hide the content before editor loads. I don't like the latter – the former seems more correct to me.

@fredck
Copy link
Contributor Author

fredck commented Mar 14, 2017

Small devil question... considering that this site is a demo of CKEditor, which comes in a script... does it make sense to have the script at the end of the page instead of "head". There is nothing else in the page for the user to contemplate, anyway ;)

@Reinmar
Copy link
Collaborator

Reinmar commented Mar 14, 2017

AFAIK this will also block rendering the rest of the website and loading the other files – IMO, it's better to show something than to show nothing for the entire time.

@fredck
Copy link
Contributor Author

fredck commented Mar 14, 2017

Exactly... but that "something" is the problem... it's more like "whatever" and I feel that "nothing" is better, then.

Maybe we put the script element right before the editor contents then?

Or maybe move the Hotjar and Google Tag Manager scripts to the button as well and see what happens?

@oleq
Copy link
Collaborator

oleq commented Mar 14, 2017

I would simply add the styles to <div id="editor"> to give it the same width and background as the editable of the actual editor. So when the editor loads, to the user, it would look like <div id="editor"> is being "boxed", transformed into the editor, which is acceptable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Reinmar @fredck @oleq