this repo has no description
Micro perf optimizations maybe
+194
-194
+7
src/app.css
+7
src/app.css
+1
src/components/avatar.css
+1
src/components/avatar.css
+2
-4
src/components/icon.jsx
+2
-4
src/components/icon.jsx
···
1
+
import { memo } from 'preact/compat';
1
2
import { useEffect, useState } from 'preact/hooks';
2
3
3
4
const SIZES = {
···
132
133
style={{
133
134
width: `${iconSize}px`,
134
135
height: `${iconSize}px`,
135
-
display: 'inline-block',
136
-
overflow: 'hidden',
137
-
lineHeight: 0,
138
136
...style,
139
137
}}
140
138
>
···
155
153
);
156
154
}
157
155
158
-
export default Icon;
156
+
export default memo(Icon);
+184
-190
src/pages/status.jsx
+184
-190
src/pages/status.jsx
···
650
650
resetScrollPosition(status.id);
651
651
}, []);
652
652
653
+
const renderStatus = (status) => {
654
+
const {
655
+
id: statusID,
656
+
ancestor,
657
+
isThread,
658
+
descendant,
659
+
thread,
660
+
replies,
661
+
repliesCount,
662
+
weight,
663
+
} = status;
664
+
const isHero = statusID === id;
665
+
// const StatusParent = useCallback(
666
+
// (props) =>
667
+
// isThread || thread || ancestor ? (
668
+
// <Link
669
+
// class="status-link"
670
+
// to={
671
+
// instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`
672
+
// }
673
+
// onClick={() => {
674
+
// resetScrollPosition(statusID);
675
+
// }}
676
+
// {...props}
677
+
// />
678
+
// ) : (
679
+
// <div class="status-focus" tabIndex={0} {...props} />
680
+
// ),
681
+
// [isThread, thread],
682
+
// );
683
+
return (
684
+
<li
685
+
key={statusID}
686
+
ref={isHero ? heroStatusRef : null}
687
+
class={`${ancestor ? 'ancestor' : ''} ${
688
+
descendant ? 'descendant' : ''
689
+
} ${thread ? 'thread' : ''} ${isHero ? 'hero' : ''}`}
690
+
>
691
+
{isHero ? (
692
+
<>
693
+
<InView
694
+
threshold={0.1}
695
+
onChange={onView}
696
+
class="status-focus"
697
+
tabIndex={0}
698
+
>
699
+
<Status
700
+
statusID={statusID}
701
+
instance={instance}
702
+
withinContext
703
+
size="l"
704
+
enableTranslate
705
+
forceTranslate={translate}
706
+
/>
707
+
</InView>
708
+
{uiState !== 'loading' && !authenticated ? (
709
+
<div class="post-status-banner">
710
+
<p>
711
+
You're not logged in. Interactions (reply, boost, etc) are not
712
+
possible.
713
+
</p>
714
+
<Link to="/login" class="button">
715
+
Log in
716
+
</Link>
717
+
</div>
718
+
) : (
719
+
!sameInstance && (
720
+
<div class="post-status-banner">
721
+
<p>
722
+
This post is from another instance (<b>{instance}</b>).
723
+
Interactions (reply, boost, etc) are not possible.
724
+
</p>
725
+
<button
726
+
type="button"
727
+
disabled={uiState === 'loading'}
728
+
onClick={() => {
729
+
setUIState('loading');
730
+
(async () => {
731
+
try {
732
+
const results = await currentMasto.v2.search.fetch({
733
+
q: heroStatus.url,
734
+
type: 'statuses',
735
+
resolve: true,
736
+
limit: 1,
737
+
});
738
+
if (results.statuses.length) {
739
+
const status = results.statuses[0];
740
+
location.hash = currentInstance
741
+
? `/${currentInstance}/s/${status.id}`
742
+
: `/s/${status.id}`;
743
+
} else {
744
+
throw new Error('No results');
745
+
}
746
+
} catch (e) {
747
+
setUIState('default');
748
+
alert('Error: ' + e);
749
+
console.error(e);
750
+
}
751
+
})();
752
+
}}
753
+
>
754
+
<Icon icon="transfer" /> Switch to my instance to enable
755
+
interactions
756
+
</button>
757
+
</div>
758
+
)
759
+
)}
760
+
</>
761
+
) : (
762
+
// <StatusParent>
763
+
<Link
764
+
class="status-link"
765
+
to={instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`}
766
+
onClick={() => {
767
+
resetScrollPosition(statusID);
768
+
}}
769
+
>
770
+
<Status
771
+
statusID={statusID}
772
+
instance={instance}
773
+
withinContext
774
+
size={thread || ancestor ? 'm' : 's'}
775
+
enableTranslate
776
+
onMediaClick={handleMediaClick}
777
+
onStatusLinkClick={handleStatusLinkClick}
778
+
/>
779
+
{ancestor && isThread && repliesCount > 1 && (
780
+
<div class="replies-link">
781
+
<Icon icon="comment" />{' '}
782
+
<span title={repliesCount}>{shortenNumber(repliesCount)}</span>
783
+
</div>
784
+
)}{' '}
785
+
{/* {replies?.length > LIMIT && (
786
+
<div class="replies-link">
787
+
<Icon icon="comment" />{' '}
788
+
<span title={replies.length}>
789
+
{shortenNumber(replies.length)}
790
+
</span>
791
+
</div>
792
+
)} */}
793
+
{/* </StatusParent> */}
794
+
</Link>
795
+
)}
796
+
{descendant && replies?.length > 0 && (
797
+
<SubComments
798
+
instance={instance}
799
+
replies={replies}
800
+
hasParentThread={thread}
801
+
level={1}
802
+
accWeight={weight}
803
+
openAll={totalDescendants.current < SUBCOMMENTS_OPEN_ALL_LIMIT}
804
+
/>
805
+
)}
806
+
{uiState === 'loading' &&
807
+
isHero &&
808
+
!!heroStatus?.repliesCount &&
809
+
!hasDescendants && (
810
+
<div class="status-loading">
811
+
<Loader />
812
+
</div>
813
+
)}
814
+
{uiState === 'error' &&
815
+
isHero &&
816
+
!!heroStatus?.repliesCount &&
817
+
!hasDescendants && (
818
+
<div class="status-error">
819
+
Unable to load replies.
820
+
<br />
821
+
<button
822
+
type="button"
823
+
class="plain"
824
+
onClick={() => {
825
+
states.reloadStatusPage++;
826
+
}}
827
+
>
828
+
Try again
829
+
</button>
830
+
</div>
831
+
)}
832
+
</li>
833
+
);
834
+
};
835
+
653
836
return (
654
837
<div
655
838
tabIndex="-1"
···
869
1052
uiState === 'loading' ? 'loading' : ''
870
1053
}`}
871
1054
>
872
-
{statuses.slice(0, limit).map((status) => {
873
-
const {
874
-
id: statusID,
875
-
ancestor,
876
-
isThread,
877
-
descendant,
878
-
thread,
879
-
replies,
880
-
repliesCount,
881
-
weight,
882
-
} = status;
883
-
const isHero = statusID === id;
884
-
// const StatusParent = useCallback(
885
-
// (props) =>
886
-
// isThread || thread || ancestor ? (
887
-
// <Link
888
-
// class="status-link"
889
-
// to={
890
-
// instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`
891
-
// }
892
-
// onClick={() => {
893
-
// resetScrollPosition(statusID);
894
-
// }}
895
-
// {...props}
896
-
// />
897
-
// ) : (
898
-
// <div class="status-focus" tabIndex={0} {...props} />
899
-
// ),
900
-
// [isThread, thread],
901
-
// );
902
-
return (
903
-
<li
904
-
key={statusID}
905
-
ref={isHero ? heroStatusRef : null}
906
-
class={`${ancestor ? 'ancestor' : ''} ${
907
-
descendant ? 'descendant' : ''
908
-
} ${thread ? 'thread' : ''} ${isHero ? 'hero' : ''}`}
909
-
>
910
-
{isHero ? (
911
-
<>
912
-
<InView
913
-
threshold={0.1}
914
-
onChange={onView}
915
-
class="status-focus"
916
-
tabIndex={0}
917
-
>
918
-
<Status
919
-
statusID={statusID}
920
-
instance={instance}
921
-
withinContext
922
-
size="l"
923
-
enableTranslate
924
-
forceTranslate={translate}
925
-
/>
926
-
</InView>
927
-
{uiState !== 'loading' && !authenticated ? (
928
-
<div class="post-status-banner">
929
-
<p>
930
-
You're not logged in. Interactions (reply, boost, etc)
931
-
are not possible.
932
-
</p>
933
-
<Link to="/login" class="button">
934
-
Log in
935
-
</Link>
936
-
</div>
937
-
) : (
938
-
!sameInstance && (
939
-
<div class="post-status-banner">
940
-
<p>
941
-
This post is from another instance (
942
-
<b>{instance}</b>). Interactions (reply, boost, etc)
943
-
are not possible.
944
-
</p>
945
-
<button
946
-
type="button"
947
-
disabled={uiState === 'loading'}
948
-
onClick={() => {
949
-
setUIState('loading');
950
-
(async () => {
951
-
try {
952
-
const results =
953
-
await currentMasto.v2.search.fetch({
954
-
q: heroStatus.url,
955
-
type: 'statuses',
956
-
resolve: true,
957
-
limit: 1,
958
-
});
959
-
if (results.statuses.length) {
960
-
const status = results.statuses[0];
961
-
location.hash = currentInstance
962
-
? `/${currentInstance}/s/${status.id}`
963
-
: `/s/${status.id}`;
964
-
} else {
965
-
throw new Error('No results');
966
-
}
967
-
} catch (e) {
968
-
setUIState('default');
969
-
alert('Error: ' + e);
970
-
console.error(e);
971
-
}
972
-
})();
973
-
}}
974
-
>
975
-
<Icon icon="transfer" /> Switch to my instance to
976
-
enable interactions
977
-
</button>
978
-
</div>
979
-
)
980
-
)}
981
-
</>
982
-
) : (
983
-
// <StatusParent>
984
-
<Link
985
-
class="status-link"
986
-
to={
987
-
instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`
988
-
}
989
-
onClick={() => {
990
-
resetScrollPosition(statusID);
991
-
}}
992
-
>
993
-
<Status
994
-
statusID={statusID}
995
-
instance={instance}
996
-
withinContext
997
-
size={thread || ancestor ? 'm' : 's'}
998
-
enableTranslate
999
-
onMediaClick={handleMediaClick}
1000
-
onStatusLinkClick={handleStatusLinkClick}
1001
-
/>
1002
-
{ancestor && isThread && repliesCount > 1 && (
1003
-
<div class="replies-link">
1004
-
<Icon icon="comment" />{' '}
1005
-
<span title={repliesCount}>
1006
-
{shortenNumber(repliesCount)}
1007
-
</span>
1008
-
</div>
1009
-
)}{' '}
1010
-
{/* {replies?.length > LIMIT && (
1011
-
<div class="replies-link">
1012
-
<Icon icon="comment" />{' '}
1013
-
<span title={replies.length}>
1014
-
{shortenNumber(replies.length)}
1015
-
</span>
1016
-
</div>
1017
-
)} */}
1018
-
{/* </StatusParent> */}
1019
-
</Link>
1020
-
)}
1021
-
{descendant && replies?.length > 0 && (
1022
-
<SubComments
1023
-
instance={instance}
1024
-
replies={replies}
1025
-
hasParentThread={thread}
1026
-
level={1}
1027
-
accWeight={weight}
1028
-
openAll={
1029
-
totalDescendants.current < SUBCOMMENTS_OPEN_ALL_LIMIT
1030
-
}
1031
-
/>
1032
-
)}
1033
-
{uiState === 'loading' &&
1034
-
isHero &&
1035
-
!!heroStatus?.repliesCount &&
1036
-
!hasDescendants && (
1037
-
<div class="status-loading">
1038
-
<Loader />
1039
-
</div>
1040
-
)}
1041
-
{uiState === 'error' &&
1042
-
isHero &&
1043
-
!!heroStatus?.repliesCount &&
1044
-
!hasDescendants && (
1045
-
<div class="status-error">
1046
-
Unable to load replies.
1047
-
<br />
1048
-
<button
1049
-
type="button"
1050
-
class="plain"
1051
-
onClick={() => {
1052
-
states.reloadStatusPage++;
1053
-
}}
1054
-
>
1055
-
Try again
1056
-
</button>
1057
-
</div>
1058
-
)}
1059
-
</li>
1060
-
);
1061
-
})}
1055
+
{statuses.slice(0, limit).map(renderStatus)}
1062
1056
{showMore > 0 && (
1063
1057
<li>
1064
1058
<button