Adds two components, Spinner and ProgressBar, that can be added to submit buttons in the updated Perma dashboard. One quick additional note:
The process of creating the Spinner component ended up feeling difficult for my motion sensitivity. To alleviate this, I added an "isDisabled" prop that will render "Loading" instead of the spinner component. In the future, we can always finesse this if we want so that it is positioned and visually looks the same way as the actual spinner element.
Screenshots
Disabled spinner
Enabled spinner
How to test
Without the context of #3489, I tested this by adding the Spinner and Progress bar by themselves to App.vue:
<script setup>
import Spinner from './Spinner.vue';
import ProgressBar from './ProgressBar.vue';
</script>
<template>
<Spinner top="-20px" isDisabled />
<ProgressBar progress="90%" />
</template>
Additional testing notes:
In actual use, we will want to make sure to pass the progress percentage to ProgressBar as a dynamic value. We can do that easily with the ":" shortcut, for example:
We'll need to use the same ":" syntax with the Spinner component if we want to explicitly define isDisabled as false, to tell Vue that we need the string to be cast as a boolean. Otherwise Vue will throw a console error that there is a prop type mismatch. For example:
tinykite
commented
3 months ago
What this does
Adds two components, Spinner and ProgressBar, that can be added to submit buttons in the updated Perma dashboard. One quick additional note:
Screenshots
How to test
Without the context of #3489, I tested this by adding the Spinner and Progress bar by themselves to
App.vue:Additional testing notes:
ProgressBaras a dynamic value. We can do that easily with the ":" shortcut, for example:Spinnercomponent if we want to explicitly defineisDisabledas false, to tell Vue that we need the string to be cast as a boolean. Otherwise Vue will throw a console error that there is a prop type mismatch. For example: