mirror of
https://github.com/wasp-lang/wasp.git
synced 2024-09-11 15:26:19 +03:00
[feature] img+caption component (#416)
[Blog] #410 - added image with caption React component.
This commit is contained in:
parent
fe915158d9
commit
7c1fc37459
@ -11,6 +11,7 @@ import Link from '@docusaurus/Link';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import InBlogCta from './components/InBlogCta';
|
||||
import WaspIntro from './_wasp-intro.md';
|
||||
import ImgWithCaption from './components/ImgWithCaption'
|
||||
|
||||
![Enter Waspello](../static/img/waspello-screenshot.png)
|
||||
|
||||
@ -169,14 +170,7 @@ This is pretty much it from the stuff that works 😄 ! I kinda rushed a bit thr
|
||||
The main problem of the current implementation of Waspello is the **lack of support for optimistic UI updates in Wasp**. What this means is that currently, when an entity-related change is made (e.g. a card is moved from one list to another), we have to wait until that change is fully executed on the server until it is visible in the UI, which causes a noticeable delay.
|
||||
In many cases that is not an issue, but when UI elements are all visible at once and it is expected from them to be updated immediately, then it is noticeable. This is also one of the main reasons why we chose to work on Waspello - to have a benchmark/sandbox for this feature! Due to this issue, here's how things currently look like:
|
||||
|
||||
<p align="center">
|
||||
<figure>
|
||||
<img alt="Waspello - no optimistic UI update"
|
||||
src={useBaseUrl('img/waspello-no-opt-UI-updates.gif')}
|
||||
/>
|
||||
<figcaption class="image-caption">Without an optimistic UI update, there is a delay</figcaption>
|
||||
</figure>
|
||||
</p>
|
||||
<ImgWithCaption alt="Waspello - no optimistic UI update" source="img/waspello-no-opt-UI-updates.gif" caption="Without an optimistic UI update, there is a delay"/>
|
||||
|
||||
You can notice the delay between the moment the card is dropped on the "Done" list and the moment it becomes a part of that list. The reason is that at the moment of dropping the card on "Done" list, the API request with the change is sent to the server, and only when that change is fully processed on the server and saved to the database, the query `getListsAndCards` returns the correct info and consequently, UI is updated to the correct state.
|
||||
That is why upon dropping on "Done", the card first goes back to the original list (because the change is not saved in db yet, so `useQuery(getListsAndCards)` still returns the "old" state), it waits a bit until the API request is processed successfully, and just then the change gets reflected in the UI.
|
||||
|
17
web/blog/components/ImgWithCaption.js
Normal file
17
web/blog/components/ImgWithCaption.js
Normal file
@ -0,0 +1,17 @@
|
||||
import React from "react";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
|
||||
const ImgWithCaption = (props) => {
|
||||
return (
|
||||
<div>
|
||||
<p align="center">
|
||||
<figure>
|
||||
<img alt={props.alt} src={useBaseUrl(props.source)} />
|
||||
<figcaption class="image-caption">{props.caption}</figcaption>
|
||||
</figure>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ImgWithCaption;
|
Loading…
Reference in New Issue
Block a user