fix: say data fetching and masonry layout

Signed-off-by: Innei <i@innei.in>
Innei · Apr 3, 2024 · 82dd584 · 82dd584
1 parent 15c92d9
commit 82dd584
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git a/src/app/(app)/says/page.tsx b/src/app/(app)/says/page.tsx
@@ -6,9 +6,9 @@ import { NothingFound } from '~/components/modules/shared/NothingFound'
 import { FullPageLoading } from '~/components/ui/loading'
 
 export default function Page() {
-  const { data, isLoading } = useSayListQuery()
+  const { data, isLoading, status } = useSayListQuery()
 
-  if (isLoading) {
+  if (isLoading || status === 'pending') {
     return <FullPageLoading />
   }
 

diff --git a/src/components/modules/say/SayMasonry.tsx b/src/components/modules/say/SayMasonry.tsx
@@ -1,14 +1,14 @@
 'use client'
 
 import { memo, useMemo } from 'react'
+import Masonry from 'react-responsive-masonry'
 import { m } from 'framer-motion'
 import Markdown from 'markdown-to-jsx'
 import type { SayModel } from '@mx-space/api-client'
 import type { MarkdownToJSX } from 'markdown-to-jsx'
 
 import { useIsMobile } from '~/atoms/hooks'
 import { LoadMoreIndicator } from '~/components/modules/shared/LoadMoreIndicator'
-import { Masonry } from '~/components/ui/masonry'
 import { RelativeTime } from '~/components/ui/relative-time'
 import {
   BottomToUpSoftScaleTransitionView,
@@ -39,15 +39,19 @@ export const SayMasonry = () => {
 
   return (
     <>
-      <Masonry Component={Item} columns={isMobile ? 1 : 2} list={list} />
+      <Masonry gutter="1rem" columnsCount={isMobile ? 1 : 2}>
+        {list.map((item, index) => (
+          <Item key={item.id} item={item.item} index={index} />
+        ))}
+      </Masonry>
       {hasNextPage && (
         <LoadMoreIndicator onLoading={fetchNextPage} className="mt-12">
           <BottomToUpSoftScaleTransitionView>
-            <Masonry
-              Component={SaySkeleton}
-              columns={isMobile ? 1 : 2}
-              list={placeholderData}
-            />
+            <Masonry columnsCount={isMobile ? 1 : 2}>
+              {placeholderData.map((item) => (
+                <SaySkeleton key={item.id} />
+              ))}
+            </Masonry>
           </BottomToUpSoftScaleTransitionView>
         </LoadMoreIndicator>
       )}
@@ -63,7 +67,7 @@ const placeholderData = Array.from({ length: 10 }).map((_, index) => ({
 }))
 const SaySkeleton = memo(() => {
   return (
-    <div className="relative mb-4 border-l-[3px] border-l-slate-500 bg-slate-200/50 px-4 py-3 dark:bg-neutral-800">
+    <div className="relative border-l-[3px] border-l-slate-500 bg-slate-200/50 px-4 py-3 dark:bg-neutral-800">
       <div className="mb-2 h-6 w-full rounded bg-slate-300/80 dark:bg-neutral-700" />
       <div className="flex text-sm text-base-content/60 md:justify-between">
         <div className="mb-2 h-4 w-14 rounded bg-slate-300/80 dark:bg-neutral-700 md:mb-0" />
@@ -99,7 +103,7 @@ const Item = memo<{
       <m.blockquote
         layout
         key={say.id}
-        className="mb-4 border-l-[3px] px-4 py-3"
+        className="border-l-[3px] px-4 py-3"
         style={{
           borderLeftColor: isDark ? darkColors.accent : lightColors.accent,
           backgroundColor: addAlphaToHSL(