extract Center as a new component, and move the loading spinner to ContentWrapper

Author: severo

src/components/Center.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react'
+import { useConfig } from '../hooks/useConfig.js'
+import { cn } from '../lib/utils.js'
+import styles from '../styles/Center.module.css'
+
+export default function Center({ children }: {children?: ReactNode}) {
+  const { customClass } = useConfig()
+  return <div className={cn(styles.center, customClass?.center)}>{children}</div>
+}

src/components/Folder.tsx

@@ -3,6 +3,7 @@ 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 Center from './Center.js'
 import Layout from './Layout.js'
 import Spinner from './Spinner.js'
 
@@ -109,8 +110,8 @@ export default function Folder({ source }: FolderProps) {
         </li>
       )}
     </ul>}
-    {files?.length === 0 && <div className='center'>No files</div>}
-    {files === undefined && <div className='center'><Spinner /></div>}
+    {files?.length === 0 && <Center>No files</Center>}
+    {files === undefined && <Center><Spinner /></Center>}
   </Layout>
 }
 

src/components/viewers/AvroView.tsx

@@ -4,7 +4,6 @@ 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 '../Spinner.js'
 import ContentWrapper, { ContentSize } from './ContentWrapper.js'
 
 interface ViewerProps {
@@ -54,11 +53,9 @@ export default function AvroView({ source, setError }: ViewerProps) {
 
   const headers = content === undefined && <span>Loading...</span>
 
-  return <ContentWrapper content={content} headers={headers}>
+  return <ContentWrapper content={content} headers={headers} isLoading={isLoading}>
     <code className={styles.jsonView}>
       <Json json={json} />
     </code>
-
-    {isLoading && <div className='center'><Spinner /></div>}
   </ContentWrapper>
 }

src/components/viewers/ContentWrapper.tsx

@@ -2,6 +2,8 @@ import { ReactNode } from 'react'
 import { useConfig } from '../../hooks/useConfig.js'
 import { cn, formatFileSize } from '../../lib/utils.js'
 import styles from '../../styles/viewers/ContentWrapper.module.css'
+import Center from '../Center.js'
+import Spinner from '../Spinner.js'
 
 export interface ContentSize {
   fileSize?: number
@@ -14,10 +16,11 @@ export interface TextContent extends ContentSize {
 interface ContentWrapperProps {
   content?: ContentSize
   headers?: ReactNode
+  isLoading?: boolean
   children?: ReactNode
 }
 
-export default function ContentWrapper({ content, headers, children }: ContentWrapperProps) {
+export default function ContentWrapper({ content, headers, isLoading, children }: ContentWrapperProps) {
   const { customClass } = useConfig()
   return <div className={cn(styles.contentWrapper, customClass?.contentWrapper)}>
     <header>
@@ -26,6 +29,6 @@ export default function ContentWrapper({ content, headers, children }: ContentWr
       </span>}
       {headers}
     </header>
-    {children}
+    {isLoading ? <Center><Spinner /></Center> : children }
   </div>
 }

src/components/viewers/ImageView.tsx

@@ -3,7 +3,6 @@ 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 '../Spinner.js'
 import ContentWrapper from './ContentWrapper.js'
 
 interface ViewerProps {
@@ -54,13 +53,11 @@ export default function ImageView({ source, setError }: ViewerProps) {
     void loadContent()
   }, [fileName, resolveUrl, requestInit, setError])
 
-  return <ContentWrapper content={content}>
+  return <ContentWrapper content={content} isLoading={isLoading}>
     {content?.dataUri && <img
       alt={source.sourceId}
       className={cn(styles.image, customClass?.imageView)}
       src={content.dataUri} />}
-
-    {isLoading && <div className='center'><Spinner /></div>}
   </ContentWrapper>
 }
 

src/components/viewers/JsonView.tsx

@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react'
 import type { FileSource } from '../../lib/sources/types.js'
 import { parseFileSize } from '../../lib/utils.js'
 import styles from '../../styles/Json.module.css'
+import Center from '../Center.js'
 import Json from '../Json.js'
-import Spinner from '../Spinner.js'
 import ContentWrapper, { TextContent } from './ContentWrapper.js'
 
 interface ViewerProps {
@@ -63,19 +63,18 @@ export default function JsonView({ source, setError }: ViewerProps) {
   // If json failed to parse, show the text instead
   const showFallbackText = content?.text !== undefined && json === undefined
 
-  return <ContentWrapper content={content} headers={headers}>
-    {!isLarge && <>
-      {!showFallbackText && <code className={styles.jsonView}>
-        <Json json={json} />
-      </code>}
-      {showFallbackText && <code className={styles.text}>
-        {content.text}
-      </code>}
-    </>}
-    {isLarge && <div className='center'>
-      File is too large to display
-    </div>}
-
-    {isLoading && <div className='center'><Spinner /></div>}
+  return <ContentWrapper content={content} headers={headers} isLoading={isLoading}>
+    {isLarge ?
+      <Center>File is too large to display</Center>
+      :
+      <>
+        {!showFallbackText && <code className={styles.jsonView}>
+          <Json json={json} />
+        </code>}
+        {showFallbackText && <code className={styles.text}>
+          {content.text}
+        </code>}
+      </>
+    }
   </ContentWrapper>
 }

src/components/viewers/MarkdownView.tsx

@@ -4,7 +4,6 @@ import type { FileSource } from '../../lib/sources/types.js'
 import { cn, parseFileSize } from '../../lib/utils.js'
 import styles from '../../styles/viewers/MarkdownView.module.css'
 import Markdown from '../Markdown.js'
-import Spinner from '../Spinner.js'
 import ContentWrapper, { TextContent } from './ContentWrapper.js'
 
 interface ViewerProps {
@@ -47,9 +46,7 @@ export default function MarkdownView({ source, setError }: ViewerProps) {
     void loadContent()
   }, [resolveUrl, requestInit, setError])
 
-  return <ContentWrapper content={content}>
+  return <ContentWrapper content={content} isLoading={isLoading}>
     <Markdown className={cn(styles.markdownView, customClass?.markdownView)} text={content?.text ?? ''} />
-
-    { isLoading && <div className='center'><Spinner /></div> }
   </ContentWrapper>
 }

src/components/viewers/ParquetView.tsx

@@ -8,7 +8,6 @@ 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 '../Spinner.js'
 import CellPanel from './CellPanel.js'
 import ContentWrapper, { ContentSize } from './ContentWrapper.js'
 import SlidePanel from './SlidePanel.js'
@@ -96,7 +95,7 @@ export default function ParquetView({ source, setProgress, setError }: ViewerPro
 
   const headers = <span>{content?.dataframe.numRows.toLocaleString() ?? '...'} rows</span>
 
-  const mainContent = <ContentWrapper content={content} headers={headers}>
+  const mainContent = <ContentWrapper content={content} headers={headers} isLoading={isLoading}>
     {content?.dataframe && <HighTable
       cacheKey={source.resolveUrl}
       data={content.dataframe}
@@ -105,8 +104,6 @@ export default function ParquetView({ source, setProgress, setError }: ViewerPro
       onError={setError}
       className={cn(styles.hightable, customClass?.highTable)}
     />}
-
-    {isLoading && <div className='center'><Spinner /></div>}
   </ContentWrapper>
 
   let panelContent

src/components/viewers/TextView.tsx

@@ -3,7 +3,6 @@ import { useConfig } from '../../hooks/useConfig.js'
 import { FileSource } from '../../lib/sources/types.js'
 import { cn, parseFileSize } from '../../lib/utils.js'
 import styles from '../../styles/viewers/TextView.module.css'
-import Spinner from '../Spinner.js'
 import ContentWrapper, { TextContent } from './ContentWrapper.js'
 
 interface ViewerProps {
@@ -51,12 +50,10 @@ export default function TextView({ source, setError }: ViewerProps) {
   </>
 
   // Simple text viewer
-  return <ContentWrapper content={content} headers={headers}>
+  return <ContentWrapper content={content} headers={headers} isLoading={isLoading}>
     {content && <code className={cn(styles.text, customClass?.textView)}>
       {content.text}
     </code>}
-
-    {isLoading && <div className='center'><Spinner /></div>}
   </ContentWrapper>
 }
 

src/hooks/useConfig.ts

@@ -11,6 +11,7 @@ export interface Config {
   customClass?: {
     brand?: string
     breadcrumb?: string
+    center?: string
     contentWrapper?: string
     errorBar?: string
     highTable?: string