fix(refboard): fix WebGL null texture crash and add loading overlay

- Set texture to Texture.EMPTY before destroying sprites in
  AnimatedGifSprite and PdfPageSprite (matches VideoSprite pattern)
- Add full-screen loading overlay that blocks interaction until
  scene and assets finish loading

frontend/src/canvas/sprites/AnimatedGifSprite.ts

@@ -1,4 +1,4 @@
-import { Container, Graphics } from "pixi.js";
+import { Container, Graphics, Texture } from "pixi.js";
 import { GifSprite } from "pixi.js/gif";
 import { TextureManager } from "../TextureManager";
 
@@ -70,7 +70,7 @@ export class AnimatedGifSprite extends Container {
 
   /** The underlying GIF sprite's current texture (for clipboard/export). */
   get texture() {
-    return this._gif?.texture ?? null;
+    return this._gif?.texture ?? Texture.EMPTY;
   }
 
   /** Whether the GIF is currently animating. */
@@ -134,6 +134,7 @@ export class AnimatedGifSprite extends Container {
       if (this._gif) {
         this._gif.stop();
         this._playing = false;
+        this._gif.texture = Texture.EMPTY;
       }
       this.textures.releaseGif(this.assetKey);
       this.loaded = false;
@@ -148,6 +149,9 @@ export class AnimatedGifSprite extends Container {
     if (this._gif) {
       this._gif.stop();
       this._playing = false;
+      // Swap to EMPTY before destroying so PixiJS never reads a null source
+      // during its render-loop traversal (collectRenderables → alphaMode).
+      this._gif.texture = Texture.EMPTY;
       this.removeChild(this._gif);
       this._gif.destroy();
       this._gif = null;

frontend/src/canvas/sprites/PdfPageSprite.ts

@@ -241,6 +241,9 @@ export class PdfPageSprite extends Container {
 
     // Remove sprite from display tree entirely — avoids PixiJS v8 render crash
     if (this._sprite) {
+      // Swap to EMPTY before destroying so PixiJS never reads a null source
+      // during its render-loop traversal (collectRenderables → alphaMode).
+      this._sprite.texture = Texture.EMPTY;
       this.removeChild(this._sprite);
       this._sprite.destroy();
       this._sprite = null;

frontend/src/pages/Editor.tsx

@@ -1150,21 +1150,29 @@ export default function Editor({ isPublicView }: EditorProps) {
           canvasTransform={canvasTransform}
         />
 
-        {/* Loading / Empty canvas guide */}
+        {/* Loading overlay — blocks interaction until scene is ready */}
         {(sceneLoading || (objectCount > 0 && loadProgress.total > 0 && loadProgress.loaded < loadProgress.total)) && (
           <div style={{
-            position: 'absolute', bottom: '48px', left: '50%', transform: 'translateX(-50%)',
+            position: 'absolute', inset: 0, zIndex: 9999,
-            pointerEvents: 'none', textAlign: 'center', color: '#888', userSelect: 'none',
+            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
-            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px',
+            background: 'rgba(26, 26, 26, 0.85)', backdropFilter: 'blur(4px)',
+            color: '#ccc', userSelect: 'none', fontFamily: 'system-ui, sans-serif',
+            gap: '16px',
           }}>
-            <div style={{ fontSize: '12px', fontFamily: 'system-ui, sans-serif' }}>
+            <div style={{
+              width: '32px', height: '32px',
+              border: '3px solid #333', borderTopColor: '#4a9eff', borderRadius: '50%',
+              animation: 'spin 0.8s linear infinite',
+            }} />
+            <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
+            <div style={{ fontSize: '14px', fontWeight: 500 }}>
               {sceneLoading
-                ? `Loading ${loadProgress.total || '...'} items`
+                ? `Loading ${loadProgress.total || ''} items…`
-                : `Loading assets ${loadProgress.loaded}/${loadProgress.total}`}
+                : `Loading assets ${loadProgress.loaded} / ${loadProgress.total}`}
             </div>
             {loadProgress.total > 0 && (
               <div style={{
-                width: '160px', height: '3px', borderRadius: '2px',
+                width: '200px', height: '4px', borderRadius: '2px',
                 background: '#333', overflow: 'hidden',
               }}>
                 <div style={{