<style>
:host {
--emoji-picker-no-internet-icon-bounding-box: 48px;
}
.gif-error-container {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
}
.error-text {
font: var(--cros-headline-1-font);
line-height: 22px;
margin: 8px 0;
color: var(--emoji-picker-illustration-text-color);
}
.try-again-button {
color: var(--emoji-picker-illustration-link-color);
cursor: pointer;
font: var(--cros-body-1-font);
line-height: 20px;
}
#no-internet-icon {
color: var(--cros-icon-color-secondary);
height: var(--emoji-picker-no-internet-icon-bounding-box);
width: var(--emoji-picker-no-internet-icon-bounding-box);
}
</style>
<div class="gif-error-container">
<template is="dom-if" if="[[isGifInHttpErrorState(status)]]">
<svg xmlns="http://www.w3.org/2000/svg" width="224" height="72" viewBox="0 0 224 72" fill="none">
<g clip-path="url(#clip0_1219_58731)">
<path d="M206 45.999C209.314 45.999 212 43.3127 212 39.999C212 36.6853 209.314 33.999 206 33.999C202.686 33.999 200 36.6853 200 39.999C200 43.3127 202.686 45.999 206 45.999Z" fill="var(--cros-sys-illo-color3)" />
<path d="M25.6256 0.578691L12.7803 10.2144C12.1638 10.6769 12.2788 11.5796 12.9523 11.8351L27.2622 17.5317C27.9357 17.7872 28.655 17.2476 28.5981 16.5296L27.1334 1.19723C27.04 0.430515 26.1907 0.154718 25.6256 0.578691Z" fill="var(--cros-sys-illo-color1-2)" />
<path d="M203.634 13.9104C205.064 12.9585 205.244 11.0326 204.153 9.78079C197.227 2.09106 185.69 0.394099 176.768 6.24445C167.946 12.1147 164.86 23.3705 169.183 32.7062C169.917 34.196 171.763 34.7733 173.075 33.9007L203.634 13.9104Z" fill="var(--cros-sys-illo-color1-2)" />
<path d="M164.949 18.9237C176.944 18.8539 186.629 28.7498 186.561 40.9214L186.6 41.2391C186.453 53.2915 176.655 62.9932 164.6 62.8445C152.545 62.6959 142.84 52.8993 142.988 40.8469L142.948 40.5292C142.977 28.5561 152.874 18.8744 164.949 18.9237Z" stroke="var(--cros-sys-illo-color1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="3.61 3.61" />
<path d="M118.118 55.206C117.603 53.1357 117.548 51.3247 117.954 49.773C118.391 48.1696 119.412 46.1789 121.019 43.8008C122.264 41.9087 123.109 40.3575 123.556 39.1474C124.033 37.8855 124.087 36.5093 123.716 35.0187C123.222 33.0312 122.184 31.5966 120.602 30.715C119.009 29.792 117.074 29.6136 114.797 30.1799C112.727 30.6946 111.24 31.7017 110.338 33.201C109.426 34.659 108.875 36.3347 108.686 38.2281L103.27 37.3986C103.501 34.7911 104.446 32.3139 106.105 29.967C107.753 27.5787 110.234 25.9727 113.546 25.149C116.03 24.5313 118.354 24.5032 120.516 25.0648C122.709 25.5746 124.544 26.5911 126.022 28.1142C127.541 29.6269 128.574 31.4806 129.12 33.6751C129.511 35.2485 129.545 36.8008 129.222 38.3319C128.889 39.8216 128.437 41.0991 127.867 42.1642C127.328 43.1776 126.596 44.3926 125.674 45.8091C124.616 47.3911 123.895 48.8234 123.511 50.1061C123.167 51.3785 123.181 52.76 123.552 54.2506L124.2 56.8591L118.859 58.1872L118.118 55.206ZM124.881 71.0008C123.804 71.2685 122.78 71.1275 121.808 70.5778C120.867 69.9764 120.258 69.1167 119.98 67.9988C119.712 66.9222 119.858 65.9186 120.418 64.988C121.009 64.0057 121.843 63.3807 122.92 63.113C124.038 62.835 125.067 62.9967 126.008 63.5981C126.98 64.1478 127.6 64.9609 127.868 66.0375C128.146 67.1554 127.989 68.2056 127.398 69.1879C126.838 70.1185 125.999 70.7228 124.881 71.0008Z" fill="var(--cros-sys-illo-color1-2)" />
<path d="M69.3399 63.4977L64.2765 48.8173C63.3651 46.1849 64.7828 43.2488 67.4158 42.3376L82.0996 37.2754C84.7325 36.3642 87.6693 37.7817 88.5807 40.414L93.6441 55.0944C94.5555 57.7268 93.1378 60.6629 90.5048 61.5741L75.821 66.6363C73.188 67.5475 70.2513 66.1301 69.3399 63.4977Z" fill="var(--cros-sys-illo-color1)" />
<path d="M48.8435 12.2944L34.4635 21.8114C32.1343 23.3301 30.8179 25.9624 31.0204 28.696L32.0331 45.9076C32.2356 48.6412 33.8559 51.071 36.2863 52.286L51.679 59.9805C54.1094 61.1954 57.0462 60.993 59.3754 59.4743L73.7553 49.9573C76.0845 48.4387 77.401 45.8063 77.1984 43.0727L76.1858 25.8612C75.9832 23.1276 74.363 20.6977 71.9325 19.4828L56.5398 11.7882C54.0081 10.5733 51.0714 10.7758 48.8435 12.2944Z" stroke="var(--cros-sys-illo-secondary)" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
</g>
<defs>
<clipPath id="clip0_1219_58731">
<rect width="224" height="72" fill="var(--cros-sys-illo-base)" />
</clipPath>
</defs>
</svg>
</template>
<template is="dom-if" if="[[isGifInNetworkErrorState(status)]]">
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="72" viewBox="0 0 200 72" fill="none">
<path d="M69.9043 55.1479L68.5888 51.3154C68.349 50.617 67.5873 50.2447 66.8875 50.484L63.0474 51.7969C62.3475 52.0362 61.9746 52.7963 62.2143 53.4947L63.5298 57.3272C63.7696 58.0256 64.5312 58.3979 65.2311 58.1586L69.0712 56.8457C69.771 56.6064 70.144 55.8463 69.9043 55.1479Z" fill="var(--cros-sys-illo-color1)" />
<path d="M50.3433 30.8118C49.8983 30.6909 49.4409 30.6213 48.98 30.6044L47.5111 30.3799C46.2916 30.1791 45.1856 29.5463 44.3959 28.5975C43.2542 27.2982 42.4975 25.7029 40.6468 25.3219C39.9277 25.1721 39.1818 25.213 38.4833 25.4403C37.7849 25.6677 37.1583 26.0737 36.666 26.6179C36.6149 26.6723 36.5638 26.7335 36.516 26.7913C36.1413 27.2691 35.8746 27.8221 35.7345 28.4125C35.5943 29.0029 35.584 29.6165 35.7041 30.2113C35.8243 30.806 36.0721 31.3677 36.4305 31.8578C36.789 32.3478 37.2495 32.7545 37.7805 33.05C38.4247 33.4106 39.1438 33.6691 39.8016 33.965C41.0035 34.4897 41.9483 35.4681 42.4294 36.6861L42.9713 38.0671C43.2364 39.0793 43.7637 40.0041 44.5003 40.7486C45.2369 41.4931 46.1568 42.031 47.1676 42.3084C48.1784 42.5858 49.2446 42.5929 50.259 42.329C51.2734 42.065 52.2004 41.5393 52.9468 40.8047C53.6933 40.0701 54.2329 39.1524 54.5115 38.1438C54.7901 37.1352 54.7979 36.0712 54.5341 35.0586C54.2703 34.046 53.7442 33.1206 53.0086 32.3751C52.273 31.6297 51.3538 31.0906 50.3433 30.8118V30.8118Z" stroke="var(--cros-sys-illo-secondary)" stroke-linecap="round" stroke-linejoin="round" />
<path d="M187.529 30.8935C188.894 30.8935 190 29.7894 190 28.4275C190 27.0655 188.894 25.9614 187.529 25.9614C186.164 25.9614 185.058 27.0655 185.058 28.4275C185.058 29.7894 186.164 30.8935 187.529 30.8935Z" fill="var(--cros-sys-illo-secondary)" />
<path d="M156.811 51.2135C157.635 51.2135 158.303 50.5465 158.303 49.7237C158.303 48.9009 157.635 48.2339 156.811 48.2339C155.986 48.2339 155.318 48.9009 155.318 49.7237C155.318 50.5465 155.986 51.2135 156.811 51.2135Z" fill="var(--cros-sys-illo-color1)" />
<path d="M12.0867 23.1225C13.2391 23.1225 14.1734 22.1902 14.1734 21.04C14.1734 19.8899 13.2391 18.9575 12.0867 18.9575C10.9342 18.9575 10 19.8899 10 21.04C10 22.1902 10.9342 23.1225 12.0867 23.1225Z" fill="var(--cros-sys-illo-color1)" />
<path d="M132.918 45.788L129.169 48.271C128.869 48.4658 128.627 48.7366 128.466 49.0558C128.306 49.375 128.233 49.731 128.256 50.0874L128.529 54.5807C128.55 54.933 128.664 55.2734 128.859 55.5677C129.054 55.8621 129.323 56.1 129.64 56.2576L133.678 58.2509C133.995 58.4092 134.347 58.4816 134.7 58.4607C135.053 58.4398 135.394 58.3264 135.689 58.1318L139.438 55.6488C139.733 55.4536 139.971 55.1847 140.129 54.869C140.287 54.5532 140.359 54.2017 140.338 53.8494L140.066 49.3527C140.043 49.0006 139.929 48.6605 139.734 48.3662C139.539 48.072 139.27 47.8339 138.954 47.6758L134.929 45.6655C134.613 45.508 134.26 45.4363 133.907 45.4578C133.554 45.4793 133.213 45.5932 132.918 45.788V45.788Z" stroke="var(--cros-sys-illo-secondary)" stroke-linecap="round" stroke-linejoin="round" />
<path d="M22.9887 39.3359H16.3562C16.2857 39.3369 16.2167 39.3563 16.1562 39.3922C16.0956 39.4282 16.0455 39.4794 16.011 39.5407C15.9765 39.602 15.9587 39.6713 15.9595 39.7416C15.9603 39.8119 15.9795 39.8808 16.0154 39.9414L19.3282 45.666C19.3637 45.7244 19.4138 45.7727 19.4735 45.8063C19.5332 45.8398 19.6005 45.8574 19.669 45.8574C19.7375 45.8574 19.8049 45.8398 19.8645 45.8063C19.9242 45.7727 19.9743 45.7244 20.0098 45.666L23.3261 39.9346C23.3601 39.8745 23.3781 39.8066 23.3781 39.7375C23.3782 39.6684 23.3604 39.6005 23.3265 39.5403C23.2925 39.4801 23.2436 39.4297 23.1844 39.3939C23.1253 39.3581 23.0578 39.3381 22.9887 39.3359Z" fill="var(--cros-sys-illo-color1-2)" />
<path d="M152.622 33.6144C152.55 33.6866 152.494 33.7735 152.458 33.8692C152.422 33.9649 152.408 34.0672 152.416 34.169C152.424 34.2707 152.453 34.3697 152.503 34.4589C152.553 34.5481 152.621 34.6256 152.704 34.6859C153.765 35.4778 155.076 35.8634 156.398 35.7727C157.72 35.682 158.965 35.1211 159.908 34.1918C160.85 33.2625 161.428 32.0265 161.535 30.7084C161.642 29.3904 161.272 28.0777 160.492 27.0089C160.432 26.926 160.355 26.857 160.266 26.8065C160.177 26.756 160.078 26.7252 159.977 26.7162C159.875 26.7071 159.772 26.7201 159.676 26.7542C159.579 26.7882 159.491 26.8426 159.418 26.9136L152.622 33.6144Z" fill="var(--cros-sys-illo-color1-2)" />
<circle cx="163.5" cy="26.5" r="5.5" stroke="var(--cros-sys-illo-color1)" stroke-linecap="round" stroke-dasharray="2 2" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M81.8614 18.0259C79.3692 19.5124 77.0488 21.3099 74.9612 23.3931L70.9429 27.4068C70.6351 27.7139 70.3909 28.0784 70.2243 28.4797C70.0577 28.8809 69.9719 29.311 69.9719 29.7453C69.9719 30.1797 70.0577 30.6097 70.2243 31.011C70.3909 31.4122 70.6351 31.7768 70.9429 32.0838L77.848 38.9785C77.9408 38.8423 78.0457 38.7148 78.1616 38.5976L81.1847 35.5805C84.5762 32.1968 88.7841 29.8154 93.3462 28.6273L81.8614 18.0259ZM97.0115 27.941C98.0318 27.8227 99.0631 27.7625 100.101 27.7625C107.195 27.7625 113.999 30.5747 119.016 35.5805L122.039 38.5976C122.155 38.7148 122.26 38.8423 122.353 38.9785L129.258 32.0838C129.566 31.7772 129.811 31.413 129.978 31.012C130.145 30.611 130.232 30.1811 130.232 29.7467C130.233 29.3124 130.148 28.8822 129.982 28.4807C129.816 28.0792 129.572 27.7143 129.265 27.4068L125.247 23.3931C118.578 16.7385 109.534 13 100.104 13C94.7001 13 89.4232 14.2276 84.6474 16.528L97.0115 27.941Z" fill="var(--cros-sys-illo-color1-2)" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M93.3479 28.6289C88.7878 29.8174 84.5818 32.1982 81.1917 35.5806L78.1685 38.5977C78.0527 38.715 77.9477 38.8425 77.855 38.9787L87.2618 48.3871L88.0457 47.6047C89.6284 46.023 91.5081 44.7681 93.5772 43.9119C95.6462 43.0557 97.8642 42.615 100.104 42.615C102.344 42.615 104.562 43.0557 106.631 43.9119C108.7 44.7681 110.58 46.023 112.162 47.6047L112.946 48.3871L113.814 47.5209L93.3479 28.6289ZM115.933 45.4067L122.36 38.9923C122.267 38.8561 122.162 38.7286 122.046 38.6113L119.023 35.5806C114.006 30.5748 107.202 27.7627 100.107 27.7627C99.068 27.7627 98.0347 27.8231 97.0124 27.9419L115.933 45.4067Z" fill="var(--cros-sys-illo-color1-1)" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M112.947 48.3731L102.449 58.8495C101.827 59.4702 100.984 59.8188 100.104 59.8188C99.2247 59.8188 98.3812 59.4702 97.7593 58.8495L87.2619 48.3731L88.0458 47.5908C89.6285 46.009 91.5082 44.7541 93.5773 43.8979C95.6464 43.0418 97.8643 42.6011 100.104 42.6011C102.344 42.6011 104.562 43.0418 106.631 43.8979C108.7 44.7541 110.58 46.009 112.163 47.5908L112.947 48.3731Z" fill="var(--cros-sys-illo-color1)" />
<path d="M73.2043 12L121.917 56.9652" stroke="var(--cros-sys-illo-base)" stroke-width="3" stroke-linecap="round" />
<path d="M73.2043 12L121.917 56.9652" stroke="var(--cros-sys-illo-color1-1)" stroke-width="3" stroke-linecap="round" />
</svg>
</template>
<span class="error-text">[[getErrorMessage(status)]]</span>
<a class="try-again-button" onclick="[[onClickTryAgain]]">Try again</a>
</div>
Codebase Browser
chromium