diff --git a/web-app/src/app/landing.css b/web-app/src/app/landing.css index f1fcf540..5bb005b9 100644 --- a/web-app/src/app/landing.css +++ b/web-app/src/app/landing.css @@ -22,6 +22,29 @@ 7. Disable tap highlights on iOS */ +.no-scrollbar { + /* For Firefox */ + scrollbar-color: #666 transparent; /* Thumb color #666 and track color transparent */ + scrollbar-width: auto; /* Default scrollbar width */ +} + +/* For WebKit browsers */ +.no-scrollbar::-webkit-scrollbar { + width: 12px; /* Default width */ + height: 12px; /* Default height for horizontal scrollbars */ +} + +.no-scrollbar::-webkit-scrollbar-track { + background: transparent; /* Transparent track */ +} + +.no-scrollbar::-webkit-scrollbar-thumb { + background-color: #666; /* Thumb color */ + border-radius: 10px; /* Roundness of scrollbar thumb */ + border: 3px solid transparent; /* Space around thumb */ + background-clip: padding-box; /* Ensures the thumb's color doesn't extend into the border */ +} + html#landing { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ diff --git a/web-app/src/components/sections/IndexConversation/TabContainer/IndexItemsTab.tsx b/web-app/src/components/sections/IndexConversation/TabContainer/IndexItemsTab.tsx index c5b00f3f..0aefd7bf 100644 --- a/web-app/src/components/sections/IndexConversation/TabContainer/IndexItemsTab.tsx +++ b/web-app/src/components/sections/IndexConversation/TabContainer/IndexItemsTab.tsx @@ -19,18 +19,13 @@ import { useIndexConversation } from "../IndexConversationContext"; const CONCURRENCY_LIMIT = 10; export default function IndexItemsTabSection() { - const { - setItemsState, - loading, - setLoading, - searchLoading, - fetchIndexItems, - fetchMoreIndexItems, - } = useIndexConversation(); + const { setItemsState, searchLoading, fetchIndexItems, fetchMoreIndexItems } = + useIndexConversation(); const { isCreator } = useRole(); const { data: viewedIndex, items, + loading, addItemLoading, } = useAppSelector(selectIndex); const dispatch = useAppDispatch(); @@ -191,46 +186,48 @@ export default function IndexItemsTabSection() { // ); return ( - - {items.data && items.data.length > 0 && ( - - - - - - )} - - {isCreator && ( - - - - - - )} - -
- - viewedIndex && - fetchMoreIndexItems(viewedIndex?.id, { resetCursor: false }) - } - /> -
-
+ !loading && ( + + {items.data && items.data.length > 0 && ( + + + + + + )} + + {isCreator && ( + + + + + + )} + +
+ + viewedIndex && + fetchMoreIndexItems(viewedIndex?.id, { resetCursor: false }) + } + /> +
+
+ ) ); } diff --git a/web-app/src/components/sections/IndexList.tsx b/web-app/src/components/sections/IndexList.tsx index ff9a74e3..814c4be3 100644 --- a/web-app/src/components/sections/IndexList.tsx +++ b/web-app/src/components/sections/IndexList.tsx @@ -21,6 +21,7 @@ const IndexListSection: FC = () => { const router = useRouter(); const query = useSearchParams(); const indexes = useAppSelector(selectIndexes); + const scrollPosition = useRef(0); const { setLeftTabKey, leftTabKey } = useApp(); @@ -28,6 +29,22 @@ const IndexListSection: FC = () => { const { data: viewedConversation } = useAppSelector(selectConversation); const prevProfileID = useRef(did?.id); + useEffect(() => { + const container = document.querySelector(".index-list"); + const pos = localStorage.getItem("indexListScrollPosition"); + container?.scrollTo(0, JSON.parse(pos || "0")); + }, [id]); + + useEffect(() => { + const container = document.querySelector(".index-list"); + container?.addEventListener("scroll", () => { + scrollPosition.current = container?.scrollTop || 0; + localStorage.setItem( + "indexListScrollPosition", + (container?.scrollTop || 0).toString(), + ); + }); + }, []); const leftSectionIndexes = useMemo( () =>