bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Lazy-load the Gameboy component

Browse source
This commit is contained in:
Alex Gleason 2023-11-22 22:49:27 -06:00
parent f7c624483e
commit 0bb50f492e
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/gameboy.tsx
View file

@ -69,4 +69,4 @@ const WasmBoyOptions = {
saveStateCallback: false,
};
export { Gameboy };
export default Gameboy;

10
src/components/media-gallery.tsx
View file

@ -1,5 +1,5 @@
import clsx from 'clsx';
import React, { useState, useRef, useLayoutEffect } from 'react';
import React, { useState, useRef, useLayoutEffect, Suspense } from 'react';
import Blurhash from 'soapbox/components/blurhash';
import Icon from 'soapbox/components/icon';
@ -12,11 +12,11 @@ import { truncateFilename } from 'soapbox/utils/media';
import { isIOS } from '../is-mobile';
import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media-aspect-ratio';
import { Gameboy } from './gameboy';
import type { Property } from 'csstype';
import type { List as ImmutableList } from 'immutable';
const Gameboy = React.lazy(() => import('./gameboy'));
const ATTACHMENT_LIMIT = 4;
const MAX_FILENAME_LENGTH = 45;
@ -155,7 +155,9 @@ const Item: React.FC<IItem> = ({
key={attachment.id}
style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}
>
<Gameboy className='media-gallery__item-thumbnail object-contain' src={attachment.url} />
<Suspense fallback={<div className='media-gallery__item-thumbnail' />}>
<Gameboy className='media-gallery__item-thumbnail object-contain' src={attachment.url} />
</Suspense>
</div>
);
} else if (attachment.type === 'unknown') {