Adapt atoms

packages/atlas/src/components/Section/SectionFooter/SectionFooter.tsx

@@ -16,6 +16,7 @@ type SectionFooterLoadProps = {
   type: 'load'
   label: string
   fetchMore: () => Promise<void>
+  reachedEnd: boolean
 }
 
 type SectionFooterPaginationProps = {
@@ -25,6 +26,7 @@ type SectionFooterPaginationProps = {
 type SectionFooterInfiniteLoadingProps = {
   type: 'infinite'
   fetchMore: () => Promise<void>
+  reachedEnd: boolean
 }
 
 export type SectionFooterProps =
@@ -43,7 +45,12 @@ export const SectionFooter = (props: SectionFooterProps) => {
   const { ref, inView } = useInView()
 
   useEffect(() => {
-    if ((props.type === 'infinite' || (props.type === 'load' && isSwitchedToInfinite)) && inView && !isLoading) {
+    if (
+      (props.type === 'infinite' || (props.type === 'load' && isSwitchedToInfinite)) &&
+      !props.reachedEnd &&
+      inView &&
+      !isLoading
+    ) {
       setIsLoading(true)
       props.fetchMore().finally(() => setIsLoading(false))
     }

packages/atlas/src/components/_inputs/ToggleButtonGroup/ToggleButtonGroup.styles.ts

@@ -42,6 +42,12 @@ export const OptionWrapper = styled.div<MaskProps>`
   }
 `
 
+export const ToggleButton = styled(Button)`
+  span {
+    white-space: nowrap;
+  }
+`
+
 export const Label = styled(Text)`
   padding: ${sizes(2)};
   align-self: center;

packages/atlas/src/components/_inputs/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -2,7 +2,6 @@ import { useRef } from 'react'
 
 import { SvgActionChevronL, SvgActionChevronR } from '@/assets/icons'
 import { FilterButton, FilterButtonProps } from '@/components/FilterButton'
-import { Button } from '@/components/_buttons/Button'
 import { useHorizonthalFade } from '@/hooks/useHorizonthalFade'
 
 import {
@@ -13,6 +12,7 @@ import {
   ContentWrapper,
   Label,
   OptionWrapper,
+  ToggleButton,
 } from './ToggleButtonGroup.styles'
 
 type SharedToggleButtonProps = {
@@ -63,7 +63,7 @@ export const ToggleButtonGroup = <T extends string = string>(props: ToggleButton
         <OptionWrapper onMouseDown={handleMouseDown} ref={optionWrapperRef} visibleShadows={visibleShadows}>
           {type === 'options' &&
             props.options.map((option) => (
-              <Button
+              <ToggleButton
                 key={option}
                 fullWidth
                 variant={option !== props.value ? 'tertiary' : 'secondary'}
@@ -71,7 +71,7 @@ export const ToggleButtonGroup = <T extends string = string>(props: ToggleButton
                 size="small"
               >
                 {option}
-              </Button>
+              </ToggleButton>
             ))}
           {type === 'filter' &&
             props.filters.map((filterButtonProps, idx) => <FilterButton key={idx} {...filterButtonProps} />)}