Gif component: add percent height calc back and remove debug code

Giphy · Jan 22, 2025 · d976bde · d976bde
1 parent 6e554b9
commit d976bde
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 14 deletions.
diff --git a/packages/react-components/src/components/gif.tsx b/packages/react-components/src/components/gif.tsx
@@ -235,6 +235,10 @@ const Gif = ({
         }
     }, [])
     const height = forcedHeight || getGifHeight(gif, width)
+    if (percentWidth && !percentHeight) {
+        const ratio = Math.round((height / width) * 100)
+        percentHeight = `${ratio}%`
+    }
     const bestRendition = getBestRendition(gif.images, width, height)
     if (!bestRendition) {
         if (gif.images) {

diff --git a/packages/react-components/src/components/grid.tsx b/packages/react-components/src/components/grid.tsx
@@ -1,14 +1,16 @@
 'use client'
 import { gifPaginator, GifsResult } from '@giphy/js-fetch-api'
 import { IGif, IUser } from '@giphy/js-types'
+import DotsLoader from './loader'
 import { getGifHeight } from '@giphy/js-util'
 import React, { ComponentProps, ElementType, GetDerivedStateFromProps, PureComponent } from 'react'
 import styled from 'styled-components'
 import { debounce } from 'throttle-debounce'
 import Observer from '../util/observer'
 import FetchError from './fetch-error'
 import Gif, { EventProps } from './gif'
-import MasonryGrid, { fillArray } from './masonry-grid'
+import MasonryGrid from './masonry-grid'
+import { fillArray } from '../util/array'
 import PingbackContextManager from './pingback-context-manager'
 import type { GifOverlayProps } from './types'
 
@@ -162,6 +164,7 @@ class Grid extends PureComponent<Props, State> {
             loaderConfig,
             tabIndex = 0,
             layoutType = 'GRID',
+            loader: LoaderVisual = DotsLoader,
             fetchPriority,
         } = this.props
         const { gifWidth, gifs, isError, isDoneFetching } = this.state
@@ -219,16 +222,18 @@ class Grid extends PureComponent<Props, State> {
                         ))}
                     </MasonryGrid>
                     {!showLoader && gifs.length === 0 && noResultsMessage}
+                    {isError ? (
+                        <FetchError onClick={this.onFetch} />
+                    ) : (
+                        showLoader && (
+                            <Observer onVisibleChange={this.onLoaderVisible} config={loaderConfig}>
+                                <Loader $isFirstLoad={isFirstLoad}>
+                                    <LoaderVisual className={Grid.loaderClassName} />
+                                </Loader>
+                            </Observer>
+                        )
+                    )}
                 </div>
-                {isError ? (
-                    <FetchError onClick={this.onFetch} />
-                ) : (
-                    showLoader && (
-                        <Observer onVisibleChange={this.onLoaderVisible} config={loaderConfig}>
-                            <Loader $isFirstLoad={isFirstLoad}></Loader>
-                        </Observer>
-                    )
-                )}
             </PingbackContextManager>
         )
     }

diff --git a/packages/react-components/src/components/masonry-grid.tsx b/packages/react-components/src/components/masonry-grid.tsx
@@ -1,8 +1,5 @@
 import React, { CSSProperties, memo, ReactNode } from 'react'
-
-export function fillArray(length: number, columnOffsets: number[] = []) {
-    return Array.apply(null, Array(length)).map((_, index) => columnOffsets[index] || 0)
-}
+import { fillArray } from '../util/array'
 
 type Props = {
     totalHeight: number

diff --git a/packages/react-components/src/util/array.ts b/packages/react-components/src/util/array.ts
@@ -0,0 +1,3 @@
+export function fillArray(length: number, columnOffsets: number[] = []) {
+    return Array.apply(null, Array(length)).map((_, index: number) => columnOffsets[index] || 0)
+}