Placeholder to avoid PersonaBar slide effect

Library/Dnn.PersonaBar.UI/admin/personaBar/UserControls/PersonaBarContainer.ascx

@@ -1,9 +1,20 @@
 <%@ Control language="C#" Inherits="Dnn.PersonaBar.UI.UserControls.PersonaBarContainer" AutoEventWireup="false"  Codebehind="PersonaBarContainer.ascx.cs" %>
 <%@ Register TagPrefix="dnnweb" Namespace="DotNetNuke.Web.UI.WebControls" Assembly="DotNetNuke.Web" %>
 <asp:Panel runat="server" ID="PersonaBarPanel" Visible="False" CssClass="personalBarContainer">
+    <div id="personabar-placeholder" class="personabar-placeholder">
+        <!--
+            A temporary UI placeholder to avoid the sliding effect when PersonaBar loads
+        -->
+    </div>
 	<iframe id="personaBar-iframe" allowTransparency="true" frameBorder="0" scrolling="false"></iframe>
     <script type="text/javascript">
         (function($) {
+            // Add a class to parent body immediately to indicate PB will be visible
+            // This is useful to make room for PB placeholder
+            var parentBody = window.parent.document.body;
+            var parentBody$ = $(parentBody);
+            parentBody$.addClass('personabar-visible');
+
             $(document.body).ready(function() {
                 var w = window,
                     d = document,

Library/Dnn.PersonaBar.UI/admin/personaBar/css/personaBarContainer.css

@@ -20,4 +20,18 @@ iframe#personaBar-iframe{
 }
 .pb-scroll-wrapper iframe#personaBar-iframe.ipad {
     position: relative !important;
-}
+}
+
+.personabar-visible {
+    margin-left: 80px;
+}
+
+.personabar-placeholder {
+    width: 80px;
+    background-color: #3d3c3c;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+}