Strange Error in IE Developer window "Unable to get property 'showWaitScreenWithNoClose'" when changing Page Layout in SharePoint 2013 / SharePoint Online

I encountered a very strange error on Office 365 SharePoint Online where the ability to change the Page Layout suddenly stopped working (Page Layout button was still enabled though but none of the Page Layouts were clickable).

Basically when I debugged the error using IE Developer toolbar, I saw that the error was being thrown within sp.ui.runtime.js file each time I was trying to change the Page Layout - namely "Unable to get property 'showWaitScreenWithNoClose'" and also the SP.UI.ModalDialog box was null.

Eventually I traced the error back to the order of key js files that should be included/loaded on the default master page for the site. In my case the culprit were two script references:

<script src="../../_layouts/15/SP.Runtime.js" type="text/javascript">//<![CDATA[

//]]>

</script>

<script src="../../_layouts/15/SP.js" type="text/javascript">//<![CDATA[

//]]>

</script>

I changed the above lines in the default master page to:

<!--SPM:<Sharepoint:ScriptLink runat="server" Name="SP.js" Localizable="false"  ID="s1" LoadAfterUI="true"/>-->

<!--SPM:<Sharepoint:ScriptLink runat="server" Name="SP.Runtime.js" Localizable="false"  ID="s2" LoadAfterUI="true"/>-->

 

The key thing to note is the "LoadAfterUI" attribute that seemed to do the trick,

 

Now my page layouts are selectable and I can click and change the Page Layout to one the available layout pages in my site collection (Note - ensure that the page is in Edit mode for you to change the Layout Page)