This repository has been archived by the owner on Apr 18, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 44
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: DIA-743: [FE] Blank space is displayed instead of the records on…
… scroll up/down
- Loading branch information
1 parent
93aaec6
commit ec6c703
Showing
4 changed files
with
148 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import React, { useCallback, useContext, useMemo, useRef } from "react"; | ||
|
|
||
| export const ImageContext = React.createContext({}); | ||
| ImageContext.displayName = "ImageContext"; | ||
|
|
||
| export const ImageProvider = ({ children }) => { | ||
| const loadedImagesRef = useRef(new Map()); | ||
| const getImage = useCallback((imgSrc) => { | ||
| const loadedImages = loadedImagesRef.current; | ||
|
|
||
| if (loadedImages.has(imgSrc)) { | ||
| const loadedImage = loadedImages.get(imgSrc); | ||
|
|
||
| return loadedImage.promise; | ||
| } | ||
| const imageFetchPromise = fetch(imgSrc) | ||
| .then((response) => { | ||
| const reader = response.body.getReader(); | ||
|
|
||
| return new ReadableStream({ | ||
| start(controller) { | ||
| return pump(); | ||
| function pump() { | ||
| return reader.read().then(({ done, value }) => { | ||
| // When no more data needs to be consumed, close the stream | ||
| if (done) { | ||
| controller.close(); | ||
| return; | ||
| } | ||
| // Enqueue the next data chunk into our target stream | ||
| controller.enqueue(value); | ||
| return pump(); | ||
| }); | ||
| } | ||
| }, | ||
| }); | ||
| }) | ||
| // Create a new response out of the stream | ||
| .then((stream) => new Response(stream)) | ||
| // Create an object URL for the response | ||
| .then((response) => response.blob()) | ||
| .then((blob) => URL.createObjectURL(blob)) | ||
| // Update image | ||
| .then((url) => { | ||
| loadedImages.set(imgSrc, { | ||
| url, | ||
| promise: imageFetchPromise, | ||
| loaded: true, | ||
| }); | ||
| return loadedImages.get(imgSrc); | ||
| }) | ||
| .catch((err) => { | ||
| console.error(err); | ||
| return loadedImages.get(imgSrc); | ||
| }); | ||
|
|
||
| loadedImages.set(imgSrc, { | ||
| url: imgSrc, | ||
| promise: imageFetchPromise, | ||
| loaded: false, | ||
| }); | ||
|
|
||
| return imageFetchPromise; | ||
| }, []); | ||
| const contextValue = useMemo(() => { | ||
| return { | ||
| loadedImages: loadedImagesRef.current, | ||
| getImage, | ||
| }; | ||
| }, [getImage]); | ||
|
|
||
| return ( | ||
| <ImageContext.Provider value={contextValue}> | ||
| {children} | ||
| </ImageContext.Provider> | ||
| ); | ||
| }; | ||
|
|
||
| export const useImageProvider = () => { | ||
| return useContext(ImageContext) ?? {}; | ||
| }; |