mirror of
https://github.com/cheeaun/phanpy.git
synced 2025-03-27 03:39:19 +03:00
Micro perf optimizations maybe
This commit is contained in:
Lim Chee Aun
parent
673001e4e0
commit
809b7cc2d2
4 changed files with 194 additions and 194 deletions
|
|
@ -1418,6 +1418,13 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
line-height: 0;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
contain: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* TAG */
|
/* TAG */
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,7 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
background-color: var(--img-bg-color);
|
background-color: var(--img-bg-color);
|
||||||
|
contain: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar[data-loaded],
|
.avatar[data-loaded],
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
import { memo } from 'preact/compat';
|
||||||
import { useEffect, useState } from 'preact/hooks';
|
import { useEffect, useState } from 'preact/hooks';
|
||||||
|
|
||||||
const SIZES = {
|
const SIZES = {
|
||||||
|
|
@ -132,9 +133,6 @@ function Icon({
|
||||||
style={{
|
style={{
|
||||||
width: `${iconSize}px`,
|
width: `${iconSize}px`,
|
||||||
height: `${iconSize}px`,
|
height: `${iconSize}px`,
|
||||||
display: 'inline-block',
|
|
||||||
overflow: 'hidden',
|
|
||||||
lineHeight: 0,
|
|
||||||
...style,
|
...style,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
@ -155,4 +153,4 @@ function Icon({
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Icon;
|
export default memo(Icon);
|
||||||
|
|
|
||||||
|
|
@ -650,6 +650,189 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
|
||||||
resetScrollPosition(status.id);
|
resetScrollPosition(status.id);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
const renderStatus = (status) => {
|
||||||
|
const {
|
||||||
|
id: statusID,
|
||||||
|
ancestor,
|
||||||
|
isThread,
|
||||||
|
descendant,
|
||||||
|
thread,
|
||||||
|
replies,
|
||||||
|
repliesCount,
|
||||||
|
weight,
|
||||||
|
} = status;
|
||||||
|
const isHero = statusID === id;
|
||||||
|
// const StatusParent = useCallback(
|
||||||
|
// (props) =>
|
||||||
|
// isThread || thread || ancestor ? (
|
||||||
|
// <Link
|
||||||
|
// class="status-link"
|
||||||
|
// to={
|
||||||
|
// instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`
|
||||||
|
// }
|
||||||
|
// onClick={() => {
|
||||||
|
// resetScrollPosition(statusID);
|
||||||
|
// }}
|
||||||
|
// {...props}
|
||||||
|
// />
|
||||||
|
// ) : (
|
||||||
|
// <div class="status-focus" tabIndex={0} {...props} />
|
||||||
|
// ),
|
||||||
|
// [isThread, thread],
|
||||||
|
// );
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
key={statusID}
|
||||||
|
ref={isHero ? heroStatusRef : null}
|
||||||
|
class={`${ancestor ? 'ancestor' : ''} ${
|
||||||
|
descendant ? 'descendant' : ''
|
||||||
|
} ${thread ? 'thread' : ''} ${isHero ? 'hero' : ''}`}
|
||||||
|
>
|
||||||
|
{isHero ? (
|
||||||
|
<>
|
||||||
|
<InView
|
||||||
|
threshold={0.1}
|
||||||
|
onChange={onView}
|
||||||
|
class="status-focus"
|
||||||
|
tabIndex={0}
|
||||||
|
>
|
||||||
|
<Status
|
||||||
|
statusID={statusID}
|
||||||
|
instance={instance}
|
||||||
|
withinContext
|
||||||
|
size="l"
|
||||||
|
enableTranslate
|
||||||
|
forceTranslate={translate}
|
||||||
|
/>
|
||||||
|
</InView>
|
||||||
|
{uiState !== 'loading' && !authenticated ? (
|
||||||
|
<div class="post-status-banner">
|
||||||
|
<p>
|
||||||
|
You're not logged in. Interactions (reply, boost, etc) are not
|
||||||
|
possible.
|
||||||
|
</p>
|
||||||
|
<Link to="/login" class="button">
|
||||||
|
Log in
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
!sameInstance && (
|
||||||
|
<div class="post-status-banner">
|
||||||
|
<p>
|
||||||
|
This post is from another instance (<b>{instance}</b>).
|
||||||
|
Interactions (reply, boost, etc) are not possible.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
disabled={uiState === 'loading'}
|
||||||
|
onClick={() => {
|
||||||
|
setUIState('loading');
|
||||||
|
(async () => {
|
||||||
|
try {
|
||||||
|
const results = await currentMasto.v2.search.fetch({
|
||||||
|
q: heroStatus.url,
|
||||||
|
type: 'statuses',
|
||||||
|
resolve: true,
|
||||||
|
limit: 1,
|
||||||
|
});
|
||||||
|
if (results.statuses.length) {
|
||||||
|
const status = results.statuses[0];
|
||||||
|
location.hash = currentInstance
|
||||||
|
? `/${currentInstance}/s/${status.id}`
|
||||||
|
: `/s/${status.id}`;
|
||||||
|
} else {
|
||||||
|
throw new Error('No results');
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
setUIState('default');
|
||||||
|
alert('Error: ' + e);
|
||||||
|
console.error(e);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Icon icon="transfer" /> Switch to my instance to enable
|
||||||
|
interactions
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
// <StatusParent>
|
||||||
|
<Link
|
||||||
|
class="status-link"
|
||||||
|
to={instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`}
|
||||||
|
onClick={() => {
|
||||||
|
resetScrollPosition(statusID);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Status
|
||||||
|
statusID={statusID}
|
||||||
|
instance={instance}
|
||||||
|
withinContext
|
||||||
|
size={thread || ancestor ? 'm' : 's'}
|
||||||
|
enableTranslate
|
||||||
|
onMediaClick={handleMediaClick}
|
||||||
|
onStatusLinkClick={handleStatusLinkClick}
|
||||||
|
/>
|
||||||
|
{ancestor && isThread && repliesCount > 1 && (
|
||||||
|
<div class="replies-link">
|
||||||
|
<Icon icon="comment" />{' '}
|
||||||
|
<span title={repliesCount}>{shortenNumber(repliesCount)}</span>
|
||||||
|
</div>
|
||||||
|
)}{' '}
|
||||||
|
{/* {replies?.length > LIMIT && (
|
||||||
|
<div class="replies-link">
|
||||||
|
<Icon icon="comment" />{' '}
|
||||||
|
<span title={replies.length}>
|
||||||
|
{shortenNumber(replies.length)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)} */}
|
||||||
|
{/* </StatusParent> */}
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
{descendant && replies?.length > 0 && (
|
||||||
|
<SubComments
|
||||||
|
instance={instance}
|
||||||
|
replies={replies}
|
||||||
|
hasParentThread={thread}
|
||||||
|
level={1}
|
||||||
|
accWeight={weight}
|
||||||
|
openAll={totalDescendants.current < SUBCOMMENTS_OPEN_ALL_LIMIT}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{uiState === 'loading' &&
|
||||||
|
isHero &&
|
||||||
|
!!heroStatus?.repliesCount &&
|
||||||
|
!hasDescendants && (
|
||||||
|
<div class="status-loading">
|
||||||
|
<Loader />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{uiState === 'error' &&
|
||||||
|
isHero &&
|
||||||
|
!!heroStatus?.repliesCount &&
|
||||||
|
!hasDescendants && (
|
||||||
|
<div class="status-error">
|
||||||
|
Unable to load replies.
|
||||||
|
<br />
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="plain"
|
||||||
|
onClick={() => {
|
||||||
|
states.reloadStatusPage++;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Try again
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
tabIndex="-1"
|
tabIndex="-1"
|
||||||
|
|
@ -869,196 +1052,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
|
||||||
uiState === 'loading' ? 'loading' : ''
|
uiState === 'loading' ? 'loading' : ''
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{statuses.slice(0, limit).map((status) => {
|
{statuses.slice(0, limit).map(renderStatus)}
|
||||||
const {
|
|
||||||
id: statusID,
|
|
||||||
ancestor,
|
|
||||||
isThread,
|
|
||||||
descendant,
|
|
||||||
thread,
|
|
||||||
replies,
|
|
||||||
repliesCount,
|
|
||||||
weight,
|
|
||||||
} = status;
|
|
||||||
const isHero = statusID === id;
|
|
||||||
// const StatusParent = useCallback(
|
|
||||||
// (props) =>
|
|
||||||
// isThread || thread || ancestor ? (
|
|
||||||
// <Link
|
|
||||||
// class="status-link"
|
|
||||||
// to={
|
|
||||||
// instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`
|
|
||||||
// }
|
|
||||||
// onClick={() => {
|
|
||||||
// resetScrollPosition(statusID);
|
|
||||||
// }}
|
|
||||||
// {...props}
|
|
||||||
// />
|
|
||||||
// ) : (
|
|
||||||
// <div class="status-focus" tabIndex={0} {...props} />
|
|
||||||
// ),
|
|
||||||
// [isThread, thread],
|
|
||||||
// );
|
|
||||||
return (
|
|
||||||
<li
|
|
||||||
key={statusID}
|
|
||||||
ref={isHero ? heroStatusRef : null}
|
|
||||||
class={`${ancestor ? 'ancestor' : ''} ${
|
|
||||||
descendant ? 'descendant' : ''
|
|
||||||
} ${thread ? 'thread' : ''} ${isHero ? 'hero' : ''}`}
|
|
||||||
>
|
|
||||||
{isHero ? (
|
|
||||||
<>
|
|
||||||
<InView
|
|
||||||
threshold={0.1}
|
|
||||||
onChange={onView}
|
|
||||||
class="status-focus"
|
|
||||||
tabIndex={0}
|
|
||||||
>
|
|
||||||
<Status
|
|
||||||
statusID={statusID}
|
|
||||||
instance={instance}
|
|
||||||
withinContext
|
|
||||||
size="l"
|
|
||||||
enableTranslate
|
|
||||||
forceTranslate={translate}
|
|
||||||
/>
|
|
||||||
</InView>
|
|
||||||
{uiState !== 'loading' && !authenticated ? (
|
|
||||||
<div class="post-status-banner">
|
|
||||||
<p>
|
|
||||||
You're not logged in. Interactions (reply, boost, etc)
|
|
||||||
are not possible.
|
|
||||||
</p>
|
|
||||||
<Link to="/login" class="button">
|
|
||||||
Log in
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
!sameInstance && (
|
|
||||||
<div class="post-status-banner">
|
|
||||||
<p>
|
|
||||||
This post is from another instance (
|
|
||||||
<b>{instance}</b>). Interactions (reply, boost, etc)
|
|
||||||
are not possible.
|
|
||||||
</p>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
disabled={uiState === 'loading'}
|
|
||||||
onClick={() => {
|
|
||||||
setUIState('loading');
|
|
||||||
(async () => {
|
|
||||||
try {
|
|
||||||
const results =
|
|
||||||
await currentMasto.v2.search.fetch({
|
|
||||||
q: heroStatus.url,
|
|
||||||
type: 'statuses',
|
|
||||||
resolve: true,
|
|
||||||
limit: 1,
|
|
||||||
});
|
|
||||||
if (results.statuses.length) {
|
|
||||||
const status = results.statuses[0];
|
|
||||||
location.hash = currentInstance
|
|
||||||
? `/${currentInstance}/s/${status.id}`
|
|
||||||
: `/s/${status.id}`;
|
|
||||||
} else {
|
|
||||||
throw new Error('No results');
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
setUIState('default');
|
|
||||||
alert('Error: ' + e);
|
|
||||||
console.error(e);
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Icon icon="transfer" /> Switch to my instance to
|
|
||||||
enable interactions
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
// <StatusParent>
|
|
||||||
<Link
|
|
||||||
class="status-link"
|
|
||||||
to={
|
|
||||||
instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`
|
|
||||||
}
|
|
||||||
onClick={() => {
|
|
||||||
resetScrollPosition(statusID);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Status
|
|
||||||
statusID={statusID}
|
|
||||||
instance={instance}
|
|
||||||
withinContext
|
|
||||||
size={thread || ancestor ? 'm' : 's'}
|
|
||||||
enableTranslate
|
|
||||||
onMediaClick={handleMediaClick}
|
|
||||||
onStatusLinkClick={handleStatusLinkClick}
|
|
||||||
/>
|
|
||||||
{ancestor && isThread && repliesCount > 1 && (
|
|
||||||
<div class="replies-link">
|
|
||||||
<Icon icon="comment" />{' '}
|
|
||||||
<span title={repliesCount}>
|
|
||||||
{shortenNumber(repliesCount)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}{' '}
|
|
||||||
{/* {replies?.length > LIMIT && (
|
|
||||||
<div class="replies-link">
|
|
||||||
<Icon icon="comment" />{' '}
|
|
||||||
<span title={replies.length}>
|
|
||||||
{shortenNumber(replies.length)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)} */}
|
|
||||||
{/* </StatusParent> */}
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
{descendant && replies?.length > 0 && (
|
|
||||||
<SubComments
|
|
||||||
instance={instance}
|
|
||||||
replies={replies}
|
|
||||||
hasParentThread={thread}
|
|
||||||
level={1}
|
|
||||||
accWeight={weight}
|
|
||||||
openAll={
|
|
||||||
totalDescendants.current < SUBCOMMENTS_OPEN_ALL_LIMIT
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{uiState === 'loading' &&
|
|
||||||
isHero &&
|
|
||||||
!!heroStatus?.repliesCount &&
|
|
||||||
!hasDescendants && (
|
|
||||||
<div class="status-loading">
|
|
||||||
<Loader />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{uiState === 'error' &&
|
|
||||||
isHero &&
|
|
||||||
!!heroStatus?.repliesCount &&
|
|
||||||
!hasDescendants && (
|
|
||||||
<div class="status-error">
|
|
||||||
Unable to load replies.
|
|
||||||
<br />
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="plain"
|
|
||||||
onClick={() => {
|
|
||||||
states.reloadStatusPage++;
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Try again
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
{showMore > 0 && (
|
{showMore > 0 && (
|
||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue