Fix loading spinners and fade-in the spinner (#161)

Author: platypii

package.json

@@ -22,20 +22,20 @@
   },
   "devDependencies": {
     "@testing-library/react": "16.2.0",
-    "@types/node": "22.13.1",
+    "@types/node": "22.13.5",
     "@types/react": "19.0.8",
     "@types/react-dom": "19.0.3",
     "@vitejs/plugin-react": "4.3.4",
-    "@vitest/coverage-v8": "3.0.5",
-    "eslint": "9.20.0",
+    "@vitest/coverage-v8": "3.0.7",
+    "eslint": "9.21.0",
     "eslint-plugin-react": "7.37.4",
     "eslint-plugin-react-hooks": "5.1.0",
     "eslint-plugin-react-refresh": "0.4.19",
     "globals": "15.14.0",
     "jsdom": "26.0.0",
     "typescript": "5.7.3",
-    "typescript-eslint": "8.24.0",
-    "vite": "6.1.0",
-    "vitest": "3.0.5"
+    "typescript-eslint": "8.25.0",
+    "vite": "6.2.0",
+    "vitest": "3.0.7"
   }
 }

packages/cli/package.json

@@ -40,7 +40,7 @@
     "@rollup/plugin-replace": "6.0.2",
     "@rollup/plugin-terser": "0.4.4",
     "@rollup/plugin-typescript": "12.1.2",
-    "rollup": "4.32.1",
+    "rollup": "4.34.8",
     "rollup-plugin-postcss": "4.0.2",
     "tslib": "2.8.1"
   }

packages/cli/public/styles.css

@@ -74,6 +74,23 @@ main {
   height: 100vh;
   max-width: 100vw;
 }
+
+.spinner {
+  border: 6px solid #e8e8e8;
+  border-top: 6px solid #68a;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  animation: spin 1s linear infinite, fadeIn 3s, ease-in-out forwards;
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+@keyframes fadeIn {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
 .center {
   flex: 1;
   display: flex;

packages/components/package.json

@@ -44,12 +44,12 @@
     "hyparquet": "1.8.4",
     "hyparquet-compressors": "1.0.0"
   },
-  "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
   "devDependencies": {
     "react": "18.3.1",
     "react-dom": "18.3.1"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
 }

packages/components/src/components/Folder.tsx

@@ -109,7 +109,7 @@ export default function Folder({ source, config }: FolderProps) {
       )}
     </ul>}
     {files?.length === 0 && <div className='center'>No files</div>}
-    {files === undefined && <Spinner className='center' />}
+    {files === undefined && <div className='center'><Spinner /></div>}
   </Layout>
 }
 

packages/components/src/components/Layout.tsx

@@ -49,7 +49,7 @@ function Sidebar() {
   </nav>
 }
 
-export function Spinner({ className }: { className: string }) {
+export function Spinner({ className }: { className?: string }) {
   return <div className={cn('spinner', className)}></div>
 }
 

packages/components/src/components/viewers/ImageView.tsx

@@ -68,7 +68,7 @@ export default function ImageView({ source, setError }: ViewerProps) {
       className='image'
       src={content.dataUri} />}
 
-    {loading && <Spinner className='center' />}
+    {loading && <div className='center'><Spinner /></div>}
   </ContentHeader>
 }
 

packages/components/src/components/viewers/MarkdownView.tsx

@@ -57,6 +57,6 @@ export default function MarkdownView({ source, setError }: ViewerProps) {
   return <ContentHeader content={content}>
     <Markdown className='markdown' text={content?.text ?? ''} />
 
-    { loading === LoadingState.Loading && <Spinner className='center' /> }
+    { loading === LoadingState.Loading && <div className='center'><Spinner /></div> }
   </ContentHeader>
 }

packages/components/src/components/viewers/ParquetView.tsx

@@ -114,7 +114,7 @@ export default function ParquetView({ source, setProgress, setError, config }: V
       onMouseDownCell={onMouseDownCell}
       onError={setError} />}
 
-    {loading === LoadingState.Loading && <Spinner className='center' />}
+    {loading === LoadingState.Loading && <div className='center'><Spinner /></div>}
   </ContentHeader>
 
   let panelContent

packages/components/src/components/viewers/TextView.tsx

@@ -51,7 +51,7 @@ export default function TextView({ source, setError }: ViewerProps) {
       {content.text}
     </code>}
 
-    {!content && <Spinner className='center' />}
+    {!content && <div className='center'><Spinner /></div>}
   </ContentHeader>
 }