vitest/packages/ui/client/components/ConnectionOverlay.vue
2021-12-30 13:31:08 +08:00

36 lines
877 B
Vue

<script setup lang="ts">
import { client, isConnected, isConnecting } from '~/composables/client'
</script>
<template>
<template v-if="!isConnected">
<div
fixed inset-0 p2 z-10
select-none
text="center sm"
bg="overlay"
backdrop-blur-sm
@click="client.reconnect()"
>
<div
h-full
flex="~ col gap-2"
items-center justify-center
:class="isConnecting ? 'animate-pulse': ''"
>
<div
text="5xl"
:class="isConnecting ? 'i-carbon:renew animate-spin animate-reverse' : 'i-carbon-wifi-off'"
/>
<div text-2xl>
{{ isConnecting ? 'Connecting...' : 'Disconnected' }}
</div>
<div text-lg op50>
Check your terminal or start a new server with `vitest --open`
</div>
</div>
</div>
</template>
</template>