[External Tools] Custom CSS and JS in Canvas themes should be loaded parallely or first in the instance

[Akshara]

We're from Crystal Delta solutions, partners of Canvas instructure. We do have Loree LTI in Canvas which will make designer life easier to design a page without HTML/CSS knowledge.

We used to load the google fonts and custom fonts via CSS/JS in the Canvas themes, our clients are facing the load time for fonts and meanwhile the fonts are default font styles like Times New Roman or Lato.

We investigated how this load time is caused and came to know that the Canvas CSS/Js is loading first and then the Custom CSS/JS is loading. We raised a partner request for this issue (Case #08280319 [] [ ref:_00DA0Ibsk._5003m1FMBcN:ref ])

We got the reply to raise the suggestion for future implementation.

It would be great to load the custom CSS/JS parallelly or first to reduce the load time.

Thanks!

[mbulpitt]

This would be a great, we heavily rely on external CSS loaded from the Canvas theme and we too are seeing slower load times recently. Also, you allow a single CSS and JS file in the Canvas theme; how about being able to add multiple sources in a similar (but probably much simpler) way to adding resources on CodePen for example?

[James]

It sounds great to preload everything so that it is ready immediately. Before Canvas supplied it themselves, I wrote a script that would allow users to sort the dashboard course cards, but it had to wait until they loaded so that it could move them. Not desirable and sometimes quite noticeable.

That said, I have seen real issues with preloading and Canvas.

There is a long-standing issue with Canvas and jQuery and load-order. If you pre-load the custom JavaScript, then there is no guarantee that jQuery will be there when people expect it to be. Canvas has promised that jQuery will be available by the time that our custom JavaScript is loaded. That was the result of them switching to preloading things and the users custom scripts getting loaded before jQuery.

Even more scripts rely on elements being present that won't be if you allow pre-loading. That means a lot more mutation observers will need written to wait for elements. Mutation observers are difficult to write, and the move to ReactJS sometimes means that you need to watch high level elements where lots of mutations happen. It has the potential to slow things down even more.

Pre-loading CSS might run into specificity issues. I always try to make sure that my CSS is more specific than Canvas' CSS so that mine takes effect. Other people may not be as careful and might rely on the load order (when specificity is the same, the last item loaded wins). I have noticed in other's posts that my CSS selectors tend to be a lot longer than theirs.

One option, although it makes the interface more complicated and thus frowned upon, is some way to indicate that the item is safe for preloading. This could be done with a checkbox or a separate file for preloading and one for loading later. Most sites would be unable to take advantage of this, so it falls into the principle that Instructure designs for the masses in the middle and those on either end get left out.

[AdGreen]

This would be a gigantic help at our institution.

[eoEgerton]

Loree's ability to display content in a way that uses color and metaphors to chunk relevant and important content will serve to set Canvas apart from every other LMS. Developers, please do what you can to facilitate this mutually-beneficial request from the folks at Crystal Delta.