Archives/Athou_commafeed
1
0
Fork 1
mirror of https://github.com/Athou/commafeed.git synced 2026-03-21 21:37:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

show placeholders for loading img tags, this allows the entry to have its final height immediately

Browse Source
This commit is contained in:
Athou
2022-08-20 23:02:55 +02:00
parent 1f2a265c54
commit f81491fb32
10 changed files with 155 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
commafeed-client/src/app/constants.ts
View File

@@ -89,6 +89,7 @@ export const Constants = {
mobileBreakpoint: DEFAULT_THEME.breakpoints.md,
headerHeight: 60,
sidebarWidth: 350,
entryMaxWidth: 650,
isTopVisible: (div: HTMLDivElement) => div.getBoundingClientRect().top >= Constants.layout.headerHeight,
isBottomVisible: (div: HTMLDivElement) => div.getBoundingClientRect().bottom <= window.innerHeight,
},

6
commafeed-client/src/app/utils.ts
View File

@@ -19,3 +19,9 @@ export function categoryUnreadCount(category?: Category): number {
.map(f => f.unread)
.reduce((total, current) => total + current, 0)
}
export const calculatePlaceholderSize = ({ width, height, maxWidth }: { width?: number; height?: number; maxWidth: number }) => {
const placeholderWidth = width && Math.min(width, maxWidth)
const placeholderHeight = height && width && width > maxWidth ? height * (maxWidth / width) : height
return { width: placeholderWidth, height: placeholderHeight }
}