move Spinner styles to CSS module + move to a new component file

Author: severo

src/app.tsx

@@ -1,4 +1,3 @@
-import 'hightable/src/HighTable.css'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './components/App.js'

src/components/Folder.tsx

@@ -3,7 +3,8 @@ import { useConfig } from '../hooks/useConfig.js'
 import type { DirSource, FileMetadata } from '../lib/sources/types.js'
 import { cn, formatFileSize, getFileDate, getFileDateShort } from '../lib/utils.js'
 import Breadcrumb from './Breadcrumb.js'
-import Layout, { Spinner } from './Layout.js'
+import Layout from './Layout.js'
+import Spinner from './Spinner.js'
 
 interface FolderProps {
   source: DirSource

src/components/Layout.tsx

@@ -59,10 +59,6 @@ export default function Layout({ children, className, progress, error, title }:
   </main>
 }
 
-export function Spinner({ className }: { className?: string }) {
-  return <div className={cn('spinner', className)}></div>
-}
-
 export function ErrorBar({ error }: { error?: Error }) {
   const [showError, setShowError] = useState(error !== undefined)
   const [prevError, setPrevError] = useState(error)

src/components/Spinner.tsx

@@ -0,0 +1,8 @@
+import { useConfig } from '../hooks/useConfig.js'
+import { cn } from '../lib/utils.js'
+import styles from '../styles/Spinner.module.css'
+
+export default function Spinner() {
+  const { customClass } = useConfig()
+  return <div className={cn(styles.spinner, customClass?.spinner)}></div>
+}

src/components/index.ts

@@ -2,8 +2,9 @@ import Breadcrumb from './Breadcrumb.js'
 import Cell from './Cell.js'
 import File from './File.js'
 import Folder from './Folder.js'
-import Layout, { ErrorBar, Spinner } from './Layout.js'
+import Layout, { ErrorBar } from './Layout.js'
 import Markdown from './Markdown.js'
 import Page from './Page.js'
+import Spinner from './Spinner.js'
 export * from './viewers/index.js'
 export { Breadcrumb, Cell, ErrorBar, File, Folder, Layout, Markdown, Page, Spinner }

src/components/viewers/AvroView.tsx

@@ -4,7 +4,7 @@ import type { FileSource } from '../../lib/sources/types.js'
 import { parseFileSize } from '../../lib/utils.js'
 import styles from '../../styles/Json.module.css'
 import Json from '../Json.js'
-import { Spinner } from '../Layout.js'
+import Spinner from '../Spinner.js'
 import ContentWrapper, { ContentSize } from './ContentWrapper.js'
 
 interface ViewerProps {

src/components/viewers/ImageView.tsx

@@ -3,7 +3,7 @@ import { useConfig } from '../../hooks/useConfig.js'
 import { FileSource } from '../../lib/sources/types.js'
 import { cn, contentTypes, parseFileSize } from '../../lib/utils.js'
 import styles from '../../styles/viewers/ImageView.module.css'
-import { Spinner } from '../Layout.js'
+import Spinner from '../Spinner.js'
 import ContentWrapper from './ContentWrapper.js'
 
 interface ViewerProps {

src/components/viewers/JsonView.tsx

@@ -3,7 +3,7 @@ import type { FileSource } from '../../lib/sources/types.js'
 import { parseFileSize } from '../../lib/utils.js'
 import styles from '../../styles/Json.module.css'
 import Json from '../Json.js'
-import { Spinner } from '../Layout.js'
+import Spinner from '../Spinner.js'
 import ContentWrapper, { TextContent } from './ContentWrapper.js'
 
 interface ViewerProps {

src/components/viewers/MarkdownView.tsx

@@ -3,8 +3,8 @@ import { useConfig } from '../../hooks/useConfig.js'
 import type { FileSource } from '../../lib/sources/types.js'
 import { cn, parseFileSize } from '../../lib/utils.js'
 import styles from '../../styles/viewers/MarkdownView.module.css'
-import { Spinner } from '../Layout.js'
 import Markdown from '../Markdown.js'
+import Spinner from '../Spinner.js'
 import ContentWrapper, { TextContent } from './ContentWrapper.js'
 
 interface ViewerProps {

src/components/viewers/ParquetView.tsx

@@ -1,4 +1,5 @@
 import HighTable, { DataFrame, rowCache } from 'hightable'
+import 'hightable/src/HighTable.css'
 import { asyncBufferFromUrl, parquetMetadataAsync } from 'hyparquet'
 import React, { useCallback, useEffect, useState } from 'react'
 import { useConfig } from '../../hooks/useConfig.js'
@@ -7,7 +8,7 @@ import { FileSource } from '../../lib/sources/types.js'
 import { parquetDataFrame } from '../../lib/tableProvider.js'
 import { cn } from '../../lib/utils.js'
 import styles from '../../styles/ParquetView.module.css'
-import { Spinner } from '../Layout.js'
+import Spinner from '../Spinner.js'
 import CellPanel from './CellPanel.js'
 import ContentWrapper, { ContentSize } from './ContentWrapper.js'
 import SlidePanel from './SlidePanel.js'