Skip to content

feat(components-native): expose onLoadEnd from FormatFileThumbnail #2926

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Aiden-Brine merged 4 commits into from
Feb 25, 2026
Merged

feat(components-native): expose onLoadEnd from FormatFileThumbnail #2926

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3bbcf69
feat: expose onLoadEnd from formatFileThumbnail
YousufAJ Feb 24, 2026
0029ead
Merge branch 'master' into JOB-153532/extend-atlantis-format-file-thu…
YousufAJ Feb 24, 2026
d4d8211
chore: generate formatfile props json
YousufAJ Feb 24, 2026
ca2b4c2
fix: comments from review
YousufAJ Feb 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/components-native/src/FormatFile/FormatFile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,13 @@ interface FormatFileContentProps {
* FormatFileThumbnail.
*/
readonly skipContainerStyles?: boolean;

/**
* * @internal
* A function to be called when the media has loaded.
* This is only used in FormatFileThumbnail.
*/
readonly onMediaLoadEnd?: () => void;
}

export function FormatFileContent({
Expand All @@ -98,6 +105,7 @@ export function FormatFileContent({
onUploadComplete,
isMedia,
skipContainerStyles = false,
onMediaLoadEnd,
}: FormatFileContentProps) {
const styles = useStyles();

Expand All @@ -109,6 +117,7 @@ export function FormatFileContent({
showError={file.error}
styleInGrid={styleInGrid}
onUploadComplete={onUploadComplete}
onLoadEnd={onMediaLoadEnd}
/>
) : (
<FileView
Expand Down
9 changes: 9 additions & 0 deletions packages/components-native/src/FormatFile/FormatFileThumbnail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,13 @@ export interface FormatFileThumbnailProps<T> {
* A reference to the element in the rendered output.
*/
readonly testID?: string;

/**
* @internal
* A function to be called when the media has loaded.
* Not to be used for Files
*/
readonly onMediaLoadEnd?: () => void;
}

/**
Expand All @@ -62,6 +69,7 @@ export function FormatFileThumbnail<T extends File | FileUpload>({
createThumbnail: createThumbnailProp,
size,
testID,
onMediaLoadEnd,
}: FormatFileThumbnailProps<T>) {
const formattedFile = useMemo(
() => parseFile(file, showFileTypeIndicator),
Expand Down Expand Up @@ -98,6 +106,7 @@ export function FormatFileThumbnail<T extends File | FileUpload>({
styleInGrid={true}
showOverlay={showOverlay}
skipContainerStyles={true}
onMediaLoadEnd={onMediaLoadEnd}
/>
</View>
</AtlantisFormatFileContext.Provider>
Expand Down
7 changes: 6 additions & 1 deletion packages/components-native/src/FormatFile/components/MediaView/MediaView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ interface MediaViewProps {
readonly file: FormattedFile;
Copy link
Contributor

@Aiden-Brine Aiden-Brine Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What will the observability logic on your side look like? If this is being added to gain observability into load times, what will you be using for the start time?

Copy link
Contributor Author

@YousufAJ YousufAJ Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have a rough branch I can push if you'd like to see more details but basically was just planning to have a useEffect for when the page renders to start the timer. We then will load 16 images, and increment a counter when each of the images onLoadEnd is called. When we hit 16 on the counter that will be our total load time.

We are looking to make some optimizations for loading the thumbnail instead of the full image and want to put some numbers too it. Eventually we would also like to add some tracking using OnLoadEnd to help us figure out how much an ImageCache would help with load times as well, as we saw some poor performance on specifically android devices!"

Hope that makes sense and happy to answer any more questions!

Copy link
Contributor

@Aiden-Brine Aiden-Brine Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That all makes sense to me. The question behind my question there was if you would need onLoadStart to get the exact data you need and if so, I wanted to account for that in this set of changes. It doesn't sound like you need that so that's all good

readonly styleInGrid: boolean;
readonly onUploadComplete: () => void;
readonly onLoadEnd?: () => void;
}

export function MediaView({
Expand All @@ -27,6 +28,7 @@ export function MediaView({
file,
styleInGrid,
onUploadComplete,
onLoadEnd,
}: MediaViewProps) {
const { t } = useAtlantisI18n();
const { useCreateThumbnail } = useAtlantisFormatFileContext();
Expand Down Expand Up @@ -77,7 +79,10 @@ export function MediaView({
source={{ uri }}
testID={"test-image"}
onLoadStart={handleLoadStart}
onLoadEnd={handleLoadEnd}
onLoadEnd={() => {
handleLoadEnd();
onLoadEnd?.();
}}
>
<Overlay
isLoading={isLoading}
Expand Down
13 changes: 13 additions & 0 deletions packages/site/src/content/FormatFile/FormatFile.props-mobile.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading