adds loading state for reader page

land-cap · Dec 29, 2023 · f80da19 · f80da19 · vercel · Dec 29, 2023
1 parent 8dd6922
commit f80da19
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 7 deletions.
diff --git a/src/app/[readerMode]/[bookCode]/[chapter]/loading.tsx b/src/app/[readerMode]/[bookCode]/[chapter]/loading.tsx
@@ -0,0 +1,60 @@
+import { center } from 'styled-system/patterns'
+
+const Loading = () => (
+	<div
+		className={center({
+			gridColumn: 'content',
+			h: 'calc(100dvh - token(spacing.14) - token(spacing.14))',
+		})}
+	>
+		<style>
+			{`
+				.loader {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  display: block;
+  margin: 1rem auto;
+  position: relative;
+  color: #FFF;
+  left: -4.5rem;
+  box-sizing: border-box;
+  animation: shadowRolling 2s linear infinite;
+}
+
+@keyframes shadowRolling {
+  0% {
+    box-shadow: 0px 0 rgba(0,0,0,0), 0px 0 rgba(0,0,0,0), 0px 0 rgba(0,0,0,0), 0px 0 rgba(0,0,0,0);
+  }
+  12% {
+    box-shadow: 5rem 0 var(--colors-fg-faded), 0px 0 rgba(0,0,0,0), 0px 0 rgba(0,0,0,0), 0px 0 rgba(0,0,0,0);
+  }
+  25% {
+    box-shadow: 6rem 0 var(--colors-fg-faded), 100px 0 var(--colors-fg-faded), 0px 0 rgba(0,0,0,0), 0px 0 rgba(0,0,0,0);
+  }
+  36% {
+    box-shadow: 7rem 0 var(--colors-fg-faded), 110px 0 var(--colors-fg-faded), 100px 0 var(--colors-fg-faded), 0px 0 rgba(0,0,0,0);
+  }
+  50% {
+    box-shadow: 8rem 0 var(--colors-fg-faded), 120px 0 var(--colors-fg-faded), 110px 0 var(--colors-fg-faded), 100px 0 var(--colors-fg-faded);
+  }
+  62% {
+    box-shadow: 9rem 0 rgba(0,0,0,0), 130px 0 var(--colors-fg-faded), 120px 0 var(--colors-fg-faded), 110px 0 var(--colors-fg-faded);
+  }
+  75% {
+    box-shadow: 9rem 0 rgba(0,0,0,0), 200px 0 rgba(0,0,0,0), 130px 0 var(--colors-fg-faded), 120px 0 var(--colors-fg-faded);
+  }
+  87% {
+    box-shadow: 9rem 0 rgba(0,0,0,0), 200px 0 rgba(0,0,0,0), 200px 0 rgba(0,0,0,0), 130px 0 var(--colors-fg-faded);
+  }
+  100% {
+    box-shadow: 9rem 0 rgba(0,0,0,0), 200px 0 rgba(0,0,0,0), 200px 0 rgba(0,0,0,0), 200px 0 rgba(0,0,0,0);
+  }
+}
+				`}
+		</style>
+		<span className="loader"></span>
+	</div>
+)
+
+export default Loading
diff --git a/src/components/organisms/ReaderControls/ChapterPicker/ChapterPicker.tsx b/src/components/organisms/ReaderControls/ChapterPicker/ChapterPicker.tsx
@@ -57,7 +57,7 @@ export const ChapterPicker = ({
 	)
 
 	const chapterList = useMemo(
-		() => range(1)(selectedBook.book.chapter_count),
+		() => range(1)(selectedBook.book.chapter_count + 1),
 		[selectedBook],
 	)
 

diff --git a/src/components/organisms/ReaderControls/ReaderControls.tsx b/src/components/organisms/ReaderControls/ReaderControls.tsx
@@ -9,7 +9,7 @@ import { type TBook } from '~/db'
 
 import { Separator } from '../../atoms'
 import { ChapterPicker } from './ChapterPicker'
-import { ReaderNavButton_Toolbar } from './ReaderNavButton_Toolbar'
+import { ReaderNavButton_ReaderControls } from './ReaderNavButton_ReaderControls'
 
 export const ReaderControls = ({ bookList }: { bookList: TBook[] }) => {
 	const {
@@ -36,11 +36,11 @@ export const ReaderControls = ({ bookList }: { bookList: TBook[] }) => {
 
 	const prevBook = bookList[currBookIndex - 1]
 
-	const prevBookCode = prevBook?.book.code
+	const prevBookCode = prevBook?.book.code.toLowerCase()
 
 	const prevBookChapterCount = prevBook?.book.chapter_count
 
-	const nextBookCode = bookList[currBookIndex + 1]?.book.code
+	const nextBookCode = bookList[currBookIndex + 1]?.book.code.toLowerCase()
 
 	const prevChapterHref =
 		chapter === 1
@@ -78,13 +78,19 @@ export const ReaderControls = ({ bookList }: { bookList: TBook[] }) => {
 						h: '14',
 					})}
 				>
-					<ReaderNavButton_Toolbar href={prevChapterHref} direction="left" />
+					<ReaderNavButton_ReaderControls
+						href={prevChapterHref}
+						direction="left"
+					/>
 					<ChapterPicker
 						currChapter={chapter}
 						currBook={currBook}
 						bookList={bookList}
 					/>
-					<ReaderNavButton_Toolbar href={nextChapterHref} direction="right" />
+					<ReaderNavButton_ReaderControls
+						href={nextChapterHref}
+						direction="right"
+					/>
 				</div>
 			</div>
 		</div>

diff --git a/...eaderControls/ReaderNavButton_Toolbar.tsx → ...ntrols/ReaderNavButton_ReaderControls.tsx b/...eaderControls/ReaderNavButton_Toolbar.tsx → ...ntrols/ReaderNavButton_ReaderControls.tsx
@@ -3,7 +3,7 @@ import { flex } from 'styled-system/patterns'
 
 import { Icon } from '../../atoms'
 
-export const ReaderNavButton_Toolbar = ({
+export const ReaderNavButton_ReaderControls = ({
 	href,
 	direction,
 }: {