członek

(async () => { const anchor = document.get Element By Id('vue-widget-anchor'); if (!anchor) { console.error('Widżet Vue: brak punktu zaczepienia'); return; } // 0) Upewnij się, że #app istnieje i natychmiast renderuje szczegółowy szkielet detalu let app El = document.get Element By Id('app'); if (!app El) { app El = document.create Element('div'); app El.id = 'app'; app El.set Attribute('data-usercentrics', 'essential'); app El.style.position = 'relative'; app El.style.z Index = '1'; app El.style.min Height = '100vh'; // Zapobiegaj przesunięciu układu app El.style.background Color = '#ffffff'; // Zapobiegaj białemu błysku anchor.append Child(app El); } else { // Upewnij się, że istniejąca aplikacja ma tło app El.style.background Color = '#ffffff'; } // Stwórz szczegółowy szkielet odpowiadający strukturze Content Loading Skeleton const sk = document.create Element('div'); sk.id = 'app-skeleton'; sk.set Attribute('data-usercentrics', 'essential'); sk.inner HTML = ` ${Array.from({ length: 6 }, () => ` `).join('')} ${Array.from({ length: 5 }, () => ` ${Array.from({ length: 8 }, () => ` `).join('')} `).join('')} `; app El.append Child(sk); // Stylizacja CSS w linii, aby szkielet wyświetlał się bez oczekiwania na CSS aplikacji const sk Style = document.create Element('style'); sk Style.set Attribute('data-usercentrics', 'essential'); sk Style.text Content = ` /* Dopasuj kontener Content Loading Skeleton */ .pre-skel.container-search-page { background-color: #ffffff; display: flex; flex-direction: column; min-height: 100vh; font-family: 'Poppins', sans-serif; padding: 0; margin: 0 auto; } @media screen and (max-width: 1200px) { .pre-skel.container-search-page { padding: 0; } } /* Szkielet paska wyszukiwania */ .pre-skel__search-bar { position: sticky; top: 0; z-index: 1; background-color: #ffffff; padding: 0.75rem; border-bottom: 1px solid #f5f3ef; } .pre-skel__search-row { display: grid; grid-template-columns: 1fr repeat(4, max-content); gap: 1rem; align-items: center; } .pre-skel__searchbox { height: 40px; border-radius: 10px; background: linear-gradient(90deg, #e9e9e9 25%, #f3f3f3 37%, #e9e9e9 63%); background-size: 400% 100%; animation: pre-skel-shimmer 1.2s infinite linear; } .pre-skel__chip { width: 90px; height: 36px; border-radius: 10px; background: linear-gradient(90deg, #e9e9e9 25%, #f3f3f3 37%, #e9e9e9 63%); background-size: 400% 100%; animation: pre-skel-shimmer 1.2s infinite linear; } .pre-skel__tag-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .pre-skel__tag { width: 100px; height: 26px; border-radius: 8px; background: linear-gradient(90deg, #e9e9e9 25%, #f3f3f3 37%, #e9e9e9 63%); background-size: 400% 100%; animation: pre-skel-shimmer 1.2s infinite linear; } /* Sekcja listy nieruchomości */ .pre-skel__property-list-section { overflow-y: auto; background-color: #ffffff; border-radius: 8px; height: 100%; width: 50%; overflow-x: hidden; overflow-y: hidden; min-width: 0; padding: 0.5rem; z-index: 1000; box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: center; gap: 1rem; } @media (max-width: 1200px) { .pre-skel__property-list-section { width: 100%; padding: 1rem; } }; .pre-skel__main-content { flex: 1; display: flex; gap: 0; height: calc(100vh - 180px); position: sticky; padding: 0; width: 100%; } @media (max-width: 1200px) { .pre-skel__main-content { height: auto; top: 140px; padding: 0; } }; }; document.head.append Child(sk Style); }); // Dodatkowe odczekiwanie, aby upewnić się, że szkielet Vue jest w pełni renderowany i stabilny // Na urządzeniach mobilnych, poczekaj nieco dłużej, ponieważ renderowanie może być wolniejsze const is Mobile = window.inner Width <= 1200; const additional Wait Frames = is Mobile ? 5 : 3; await new Promise(resolve => { if (typeof request Animation Frame !== 'undefined') { let frame Count = 0; const wait Frame = () => { request Animation Frame(() => { frame Count++; if (frame Count >= additional Wait Frames) { resolve(); } else { wait Frame(); } }); }; wait Frame(); } else { set Timeout(resolve, is Mobile ? 150 : 100); } }); } catch (err) { console.error('Nie udało się załadować widżetu Vue:', err); // Pokaż błąd użytkownikowi const error El = document.create Element('div'); error El.style.padding = '12px'; error El.style.color = '#d32f2f'; error El.style.background Color = '#ffebee'; error El.style.border Radius = '4px'; error El.style.margin = '8px'; error El.text Content = 'Nie udało się załadować widżetu: ' + (err.message || 'Nieznany błąd'); app El.append Child(error El); // Usuń szkielet w przypadku błędu (brak potrzebnej animacji) const error Skeleton = document.get Element By Id('app-skeleton'); if (error Skeleton) { error Skeleton.remove(); } sk Style.remove(); } })();