Update use-sticky and update animation classes of Fab

https://youtrack.weseek.co.jp/issue/GW-7946
- Rename use-sticky-utils to  use-sticky and move to stores
- Update element empty checking
- Update useSticky imports
- Update animation classes with useEffect in Fab component

packages/app/src/components/Fab.tsx

@@ -8,8 +8,8 @@ import { useRipple } from 'react-use-ripple';
 import { usePageCreateModal } from '~/stores/modal';
 import { useCurrentPagePath } from '~/stores/page';
 import { useIsAbleToChangeEditorMode } from '~/stores/ui';
+import { useSticky } from '~/stores/use-sticky';
 import loggerFactory from '~/utils/logger';
-import { useSticky } from '~/utils/use-sticky-utils';
 
 import { CreatePageIcon } from './Icons/CreatePageIcon';
 import { ReturnTopIcon } from './Icons/ReturnTopIcon';
@@ -49,15 +49,14 @@ export const Fab = (): JSX.Element => {
         setAnimateClasses('invisible');
       }
     }, 500);
-    return () => clearTimeout(timer);
-  }, [isSticky]);
 
-  useEffect(() => {
     const newAnimateClasses = isSticky ? 'animated fadeInUp faster' : 'animated fadeOut faster';
     const newButtonClasses = isSticky ? '' : 'disabled grw-pointer-events-none';
 
     setAnimateClasses(newAnimateClasses);
     setButtonClasses(newButtonClasses);
+
+    return () => clearTimeout(timer);
   }, [isSticky]);
 
   const PageCreateButton = useCallback(() => {

packages/app/src/components/Navbar/GrowiSubNavigationSwitcher.tsx

@@ -6,8 +6,8 @@ import { debounce } from 'throttle-debounce';
 
 import { useSWRxCurrentPage } from '~/stores/page';
 import { useSidebarCollapsed } from '~/stores/ui';
+import { useSticky } from '~/stores/use-sticky';
 import loggerFactory from '~/utils/logger';
-import { useSticky } from '~/utils/use-sticky-utils';
 
 import GrowiContextualSubNavigation from './GrowiContextualSubNavigation';
 

packages/app/src/components/StickyStretchableScroller.tsx

@@ -5,8 +5,8 @@ import React, {
 import SimpleBar from 'simplebar-react';
 import { debounce } from 'throttle-debounce';
 
+import { useSticky } from '~/stores/use-sticky';
 import loggerFactory from '~/utils/logger';
-import { useSticky } from '~/utils/use-sticky-utils';
 
 const logger = loggerFactory('growi:cli:StickyStretchableScroller');
 

packages/app/src/utils/use-sticky-utils.ts → packages/app/src/stores/use-sticky.ts

@@ -11,7 +11,7 @@ export const useSticky = (selector: string): boolean => {
     // Updates the sticky status based on the current position of the observed element.
     const observe = () => {
       // If the observed element is empty or not an instance of Element, return early.
-      if (stickyElement == null || stickyElement === undefined || !(stickyElement instanceof Element)) return;
+      if (stickyElement == null || !(stickyElement instanceof Element)) return;
 
       // Calculate the element's offset from the top of the viewport and the value of its "top" CSS property.
       const elemOffset = stickyElement.getBoundingClientRect().top;