fix EVERYTHING

src/app/db/loaders.ts

@@ -88,7 +88,9 @@ export const loadAllAuthors = (): Promise<{ [key: string]: Author }> => {
   })
 }
 
-export const loadAuthors = (authorIds: string[]): Promise<Author> => {
+export const loadAuthors = (
+  authorIds: string[]
+): Promise<{ [key: string]: Author }> => {
   return new Promise((resolve, reject) => {
     if (typeof Worker !== 'undefined') {
       const worker = new Worker(
@@ -97,12 +99,10 @@ export const loadAuthors = (authorIds: string[]): Promise<Author> => {
       )
 
       worker.onmessage = (e: MessageEvent<{ [key: string]: Author }>) => {
-        const data = e.data
+        if (typeof e.data === 'object' && Object.keys(e.data).length > 0) {
-        const author: Author | undefined = data[id]
+          resolve(e.data)
-        if (!author) {
-          return reject(new Error('404'))
         } else {
-          resolve(author)
+          reject(new Error('404'))
         }
         worker.terminate()
       }
@@ -112,7 +112,7 @@ export const loadAuthors = (authorIds: string[]): Promise<Author> => {
         worker.terminate()
       }
 
-      worker.postMessage('LOAD')
+      worker.postMessage(authorIds)
     } else {
       reject(
         new Error(

src/app/db/workers/authorLoader.worker.ts

@@ -1,5 +1,19 @@
 import { authors, Author } from '../data'
 
+export function getAuthorsById(authorIds: string[]): { [key: string]: Author } {
+  const result: { [key: string]: Author } = {}
+
+  // Iterate through the array of author IDs
+  for (const id of authorIds) {
+    const author = authors[id] // Retrieve the author entry by ID
+    if (author) {
+      result[id] = author // If the author exists, add it to the result object
+    }
+  }
+
+  return result
+}
+
 const checkIsStringArray = (data: unknown): data is string[] => {
   if (Array.isArray(data)) {
     return data.every((d) => typeof d === 'string')
@@ -9,10 +23,8 @@ const checkIsStringArray = (data: unknown): data is string[] => {
 
 onmessage = (e) => {
   let authorIds: string[] = []
-  let authors = []
   checkIsStringArray(e.data) && (authorIds = e.data as string[])
+  let results = getAuthorsById(authorIds)
 
-  authorIds.forEach(id => {
+  postMessage(results)
-    
-  })
 }

src/app/document/view/[slug]/DocumentViewer.tsx

@@ -12,6 +12,8 @@ import { ItemBadge, Status } from '@/app/components/Badges'
 import { notFound } from 'next/navigation'
 import VersionChooser from './VersionChooser'
 import crypto from 'crypto'
+import loadingStyles from './loading.module.css'
+import { Suspense } from 'react'
 
 const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] })
 
@@ -88,7 +90,17 @@ const DocumentViewer = ({ slug }: Readonly<{ slug: string }>) => {
         <span className='font-bold'>Cite as: </span>
         {citation ? <>{citation}</> : <>eeXiv:{hash}</>}
       </p>
+      <Suspense
+        fallback={
+          <div className='max-w-sm animate-pulse flex flex-wrap gap-2'>
+            <div className='rounded-sm h-10 bg-gray-300 w-3 flex-grow basis-1 mt-2 mb-2'></div>
+            <div className='rounded-sm h-10 bg-gray-300 w-3 flex-grow basis-1.5 mt-2 mb-2'></div>
+            <div className='rounded-sm h-10 bg-gray-300 w-1 flex-grow basis-1 mt-2 mb-2'></div>
+          </div>
+        }
+      >
         <VersionChooser doc={doc} slug={slug} />
+      </Suspense>
     </div>
   )
 }

src/app/document/view/[slug]/VersionChooser.tsx

@@ -2,7 +2,7 @@
 import { useState, useEffect } from 'react'
 import { Document } from '@/app/db/data'
 import Link from 'next/link'
-import { loadAllAuthors } from '@/app/db/loaders'
+import { loadAuthors } from '@/app/db/loaders'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import { epoch2date } from '@/app/utils/epoch2datestring'
 
@@ -13,7 +13,7 @@ const VersionChooser = ({
   const { data, error } = useSuspenseQuery({
     queryKey: ['authors_all'],
     queryFn: () => {
-      const data = loadAllAuthors()
+      const data = loadAuthors(doc.manifest.authors)
       return data
     },
   })

src/app/document/view/[slug]/loading.module.css

@@ -0,0 +1,31 @@
+.skeleton-box {
+  display: inline-block;
+  height: 1em;
+  position: relative;
+  overflow: hidden;
+  background-color: #dddbdd;
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    background-image: linear-gradient(
+      90deg,
+      rgba(#fff, 0) 0,
+      rgba(#fff, 0.2) 20%,
+      rgba(#fff, 0.5) 60%,
+      rgba(#fff, 0)
+    );
+    animation: shimmer 5s infinite;
+    content: '';
+  }
+
+  @keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+}