👌 Improve iframe loading (#7)

In real-world scenarios, when the documentation is hosted, there may be a delay whilst the iframe content loads.
This commit adds CSS to the iframe background, to show a loading spinner to the user

Author: chrisjsewell

.pre-commit-config.yaml

@@ -32,10 +32,11 @@ repos:
     name: prettier (css, js)
     types_or: [css, javascript]
 
-- repo: https://github.com/pre-commit/mirrors-csslint
-  rev: v1.0.5
-  hooks:
-  - id: csslint
+# fails on background-image: url(...)
+# - repo: https://github.com/pre-commit/mirrors-csslint
+#   rev: v1.0.5
+#   hooks:
+#   - id: csslint
 
 - repo: local
   hooks:

docs/index.rst

@@ -15,6 +15,7 @@ that can be clicked to peek at the target of the reference.
 .. video:: _static/sphinx-peek-demo.mp4
     :alt: sphinx-peek demo
     :width: 600
+    :preload: none
 
 Usage
 -----

src/sphinx_peek/__init__.py

@@ -68,7 +68,7 @@ class PeekConfig:
     preview_height: int = f("Height of preview window", 300)
     offset_x: int = f("Distance of preview window from icon (horizontal)", 20)
     offset_y: int = f("Distance of preview window from icon (vertical)", 20)
-    open_delay: int = f("Delay (milliseconds) before displaying preview window", 100)
+    open_delay: int = f("Delay (milliseconds) before displaying preview window", 200)
 
     @classmethod
     def from_config(cls, config: Config) -> PeekConfig:

src/sphinx_peek/assets/sphinx_peek.css

@@ -46,4 +46,8 @@
   overflow: hidden;
   border: none;
   border-radius: 0.5rem;
+  background-color: rgba(128, 128, 128, 0.4);
+  background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_P7sC{transform-origin:center;animation:spinner_svv2 .75s infinite linear}@keyframes spinner_svv2{100%{transform:rotate(360deg)}}</style><path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" class="spinner_P7sC"/></svg>');
+  background-repeat: no-repeat;
+  background-position: center center;
 }