btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

feat: placeholder component in hoppscotch-ui (#3123)

Browse Source 
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
This commit is contained in:
Anwarul Islam
2023-06-21 00:39:16 +06:00
committed by GitHub
parent 331d482b22
commit fc3e3aeaec
43 changed files with 378 additions and 577 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
packages/hoppscotch-common/src/components/http/ResponseMeta.vue
View File

@@ -11,51 +11,29 @@
<HoppSmartSpinner class="my-4" />
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
</div>
<div
<HoppSmartPlaceholder
v-if="response.type === 'network_fail'"
class="flex flex-col items-center justify-center flex-1 p-4"
:src="`/images/states/${colorMode.value}/youre_lost.svg`"
:alt="`${t('error.network_fail')}`"
:heading="t('error.network_fail')"
:text="t('helpers.network_fail')"
>
<img
:src="`/images/states/${colorMode.value}/youre_lost.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-32 h-32 my-4"
:alt="`${t('error.network_fail')}`"
/>
<span class="mb-2 font-semibold text-center">
{{ t("error.network_fail") }}
</span>
<span
class="max-w-sm mb-6 text-center whitespace-normal text-secondaryLight"
>
{{ t("helpers.network_fail") }}
</span>
<AppInterceptor class="p-2 border rounded border-dividerLight" />
</div>
<div
</HoppSmartPlaceholder>
<HoppSmartPlaceholder
v-if="response.type === 'script_fail'"
class="flex flex-col items-center justify-center flex-1 p-4"
:src="`/images/states/${colorMode.value}/youre_lost.svg`"
:alt="`${t('error.script_fail')}`"
:label="t('error.script_fail')"
:text="t('helpers.script_fail')"
>
<img
:src="`/images/states/${colorMode.value}/youre_lost.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-32 h-32 my-4"
:alt="`${t('error.script_fail')}`"
/>
<span class="mb-2 font-semibold text-center">
{{ t("error.script_fail") }}
</span>
<span
class="max-w-sm mb-6 text-center whitespace-normal text-secondaryLight"
>
{{ t("helpers.script_fail") }}
</span>
<div
class="w-full px-4 py-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
class="mt-2 w-full px-4 py-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
>
{{ response.error.name }}: {{ response.error.message }}<br />
{{ response.error.stack }}
</div>
</div>
</HoppSmartPlaceholder>
<div
v-if="response.type === 'success' || response.type === 'fail'"
class="flex items-center font-semibold text-tiny"