From d894dfb2e0242a3f3c0c7a2c384197c937e0064c Mon Sep 17 00:00:00 2001 From: Youwen Wu Date: Wed, 14 Feb 2024 19:22:48 -0800 Subject: [PATCH] fix EVERYTHING --- src/app/db/loaders.ts | 14 ++++----- src/app/db/workers/authorLoader.worker.ts | 20 +++++++++--- .../document/view/[slug]/DocumentViewer.tsx | 14 ++++++++- .../document/view/[slug]/VersionChooser.tsx | 6 ++-- .../document/view/[slug]/loading.module.css | 31 +++++++++++++++++++ 5 files changed, 70 insertions(+), 15 deletions(-) create mode 100644 src/app/document/view/[slug]/loading.module.css diff --git a/src/app/db/loaders.ts b/src/app/db/loaders.ts index 563e4ea..759c783 100644 --- a/src/app/db/loaders.ts +++ b/src/app/db/loaders.ts @@ -88,7 +88,9 @@ export const loadAllAuthors = (): Promise<{ [key: string]: Author }> => { }) } -export const loadAuthors = (authorIds: string[]): Promise => { +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 => { ) worker.onmessage = (e: MessageEvent<{ [key: string]: Author }>) => { - const data = e.data - const author: Author | undefined = data[id] - if (!author) { - return reject(new Error('404')) + if (typeof e.data === 'object' && Object.keys(e.data).length > 0) { + resolve(e.data) } else { - resolve(author) + reject(new Error('404')) } worker.terminate() } @@ -112,7 +112,7 @@ export const loadAuthors = (authorIds: string[]): Promise => { worker.terminate() } - worker.postMessage('LOAD') + worker.postMessage(authorIds) } else { reject( new Error( diff --git a/src/app/db/workers/authorLoader.worker.ts b/src/app/db/workers/authorLoader.worker.ts index 99fd243..0509ee4 100644 --- a/src/app/db/workers/authorLoader.worker.ts +++ b/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) } diff --git a/src/app/document/view/[slug]/DocumentViewer.tsx b/src/app/document/view/[slug]/DocumentViewer.tsx index 6066257..e2a1eae 100644 --- a/src/app/document/view/[slug]/DocumentViewer.tsx +++ b/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 }>) => { Cite as: {citation ? <>{citation} : <>eeXiv:{hash}}

- + +
+
+
+ + } + > + + ) } diff --git a/src/app/document/view/[slug]/VersionChooser.tsx b/src/app/document/view/[slug]/VersionChooser.tsx index 70f532e..e40e7cc 100644 --- a/src/app/document/view/[slug]/VersionChooser.tsx +++ b/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,12 +13,12 @@ const VersionChooser = ({ const { data, error } = useSuspenseQuery({ queryKey: ['authors_all'], queryFn: () => { - const data = loadAllAuthors() + const data = loadAuthors(doc.manifest.authors) return data }, }) if (error) throw error - + useEffect(() => { console.log(data) }, [data]) diff --git a/src/app/document/view/[slug]/loading.module.css b/src/app/document/view/[slug]/loading.module.css new file mode 100644 index 0000000..34cf148 --- /dev/null +++ b/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%); + } + } +}