@@ -30,14 +30,12 @@ const SMSIZE = 30
30
30
const MDSIZE = 62
31
31
const LGSIZE = 82
32
32
33
- // Add this key function to generate cache keys
34
33
const getCacheKey = ( src : string ) => `iframe-cache-${ src } `
35
34
36
35
export const BlockPreview : React . FC < BlockPreviewProps > = ( { code, preview, title, category, previewOnly } ) => {
37
36
const [ width , setWidth ] = useState ( DEFAULTSIZE )
38
37
const [ mode , setMode ] = useState < 'preview' | 'code' > ( 'preview' )
39
38
const [ iframeHeight , setIframeHeight ] = useState ( 0 )
40
- const [ isLoading , setIsLoading ] = useState ( true )
41
39
const [ shouldLoadIframe , setShouldLoadIframe ] = useState ( false )
42
40
const [ cachedHeight , setCachedHeight ] = useState < number | null > ( null )
43
41
const [ isIframeCached , setIsIframeCached ] = useState ( false )
@@ -54,7 +52,6 @@ export const BlockPreview: React.FC<BlockPreviewProps> = ({ code, preview, title
54
52
const observer = useRef < IntersectionObserver | null > ( null )
55
53
const blockRef = useRef < HTMLDivElement > ( null )
56
54
57
- // Set up Intersection Observer to load iframe when it comes into view
58
55
useEffect ( ( ) => {
59
56
observer . current = new IntersectionObserver (
60
57
( entries ) => {
@@ -75,15 +72,12 @@ export const BlockPreview: React.FC<BlockPreviewProps> = ({ code, preview, title
75
72
}
76
73
} , [ ] )
77
74
78
- // Check if the iframe content is already cached
79
75
useEffect ( ( ) => {
80
- // Check if the iframe content is already cached by service worker
81
76
const checkCache = async ( ) => {
82
77
try {
83
78
const isCached = await isUrlCached ( preview )
84
79
setIsIframeCached ( isCached )
85
80
if ( isCached ) {
86
- // If cached by service worker, we can load it immediately
87
81
setShouldLoadIframe ( true )
88
82
}
89
83
} catch ( error ) {
@@ -93,38 +87,31 @@ export const BlockPreview: React.FC<BlockPreviewProps> = ({ code, preview, title
93
87
94
88
checkCache ( )
95
89
96
- // Also check localStorage for cached height
97
90
try {
98
91
const cacheKey = getCacheKey ( preview )
99
92
const cached = localStorage . getItem ( cacheKey )
100
93
if ( cached ) {
101
94
const { height, timestamp } = JSON . parse ( cached )
102
- // Use cached height if it's less than 24 hours old
103
95
const now = Date . now ( )
104
96
if ( now - timestamp < 24 * 60 * 60 * 1000 ) {
105
97
setCachedHeight ( height )
106
98
setIframeHeight ( height )
107
- // Still load the iframe, but we can show the correct height immediately
108
99
}
109
100
}
110
101
} catch ( error ) {
111
102
console . error ( 'Error retrieving cache:' , error )
112
103
}
113
104
} , [ preview ] )
114
105
115
- // Setup iframe load handler and height caching
116
106
useEffect ( ( ) => {
117
107
const iframe = iframeRef . current
118
108
if ( ! iframe || ! shouldLoadIframe ) return
119
109
120
110
const handleLoad = ( ) => {
121
- setIsLoading ( false )
122
-
123
111
try {
124
112
const contentHeight = iframe . contentWindow ! . document . body . scrollHeight
125
113
setIframeHeight ( contentHeight )
126
114
127
- // Cache the height in localStorage
128
115
const cacheKey = getCacheKey ( preview )
129
116
const cacheValue = JSON . stringify ( {
130
117
height : contentHeight ,
@@ -142,23 +129,19 @@ export const BlockPreview: React.FC<BlockPreviewProps> = ({ code, preview, title
142
129
}
143
130
} , [ shouldLoadIframe , preview ] )
144
131
145
- // Add preload link for the iframe source when it's likely to be needed soon
146
132
useEffect ( ( ) => {
147
133
if ( ! blockRef . current || shouldLoadIframe ) return
148
134
149
- // Create a preload link for the iframe content
150
135
const linkElement = document . createElement ( 'link' )
151
136
linkElement . rel = 'preload'
152
137
linkElement . href = preview
153
138
linkElement . as = 'document'
154
139
155
- // Only add if not already in the document
156
140
if ( ! document . head . querySelector ( `link[rel="preload"][href="${ preview } "]` ) ) {
157
141
document . head . appendChild ( linkElement )
158
142
}
159
143
160
144
return ( ) => {
161
- // Clean up the preload link when component unmounts or iframe loads
162
145
const existingLink = document . head . querySelector ( `link[rel="preload"][href="${ preview } "]` )
163
146
if ( existingLink ) {
164
147
document . head . removeChild ( existingLink )
0 commit comments