@kanaries/graphic-walker 0.4.3 → 0.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",

package/src/components/loadingLayer.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
+import Spinner from './spinner';
 
 export default function LoadingLayer () {
     return <div className="bg-gray-100/50 dark:bg-gray-700/50 absolute top-0 left-0 right-0 bottom-0 z-50 flex items-center justify-center">
-        Loading...
+        <Spinner className="text-indigo-500" />
+        <span className="text-sm text-indigo-500">
+            Loading...
+        </span>
     </div>
 }

package/src/components/spinner.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-export default function Spinner() {
+export default function Spinner(props: { className?: string }) {
+    const className = props.className || 'text-white';
     return (
-        <svg className="animate-spin ml-2 mr-2 h-5 w-5 text-white" viewBox="0 0 24 24">
+        <svg className={`animate-spin ml-2 mr-2 h-5 w-5 ${className}`} viewBox="0 0 24 24">
             <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
             <path
                 className="opacity-75"

package/src/renderer/index.tsx

@@ -76,7 +76,7 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
                 setViewConfig(latestFromRef.current.visualConfig);
             });
         }
-    }, [waiting, vizStore]);
+    }, [waiting, data, vizStore]);
 
     useChartIndexControl({
         count: visList.length,