simono41/phanpy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

This autoAnimate is SO GOOD

Browse source
This commit is contained in:
Lim Chee Aun 2023-10-30 09:24:36 +08:00
parent 3092a8bba1
commit 3760b52860
1 changed files with 7 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/pages/search.jsx
View file

@ -1,5 +1,6 @@
import './search.css'; import './search.css';
import { useAutoAnimate } from '@formkit/auto-animate/preact';
import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks'; import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import { InView } from 'react-intersection-observer'; import { InView } from 'react-intersection-observer';
@ -145,6 +146,8 @@ function Search(props) {
}, },
); );
const [filterBarParent] = useAutoAnimate();
return ( return (
<div id="search-page" class="deck-container" ref={scrollableRef}> <div id="search-page" class="deck-container" ref={scrollableRef}>
<div class="timeline-deck deck"> <div class="timeline-deck deck">
@ -159,7 +162,10 @@ function Search(props) {
</header> </header>
<main> <main>
{!!q && ( {!!q && (
<div class={`filter-bar ${uiState === 'loading' ? 'loading' : ''}`}> <div
ref={filterBarParent}
class={`filter-bar ${uiState === 'loading' ? 'loading' : ''}`}
>
{!!type && ( {!!type && (
<Link to={`/search${q ? `?q=${encodeURIComponent(q)}` : ''}`}> <Link to={`/search${q ? `?q=${encodeURIComponent(q)}` : ''}`}>
‹ All ‹ All